如何使下拉菜单在桌面视图中展开但在移动视图中折叠？

【问题标题】：How to make dropdown expanded in desktop view but collapsed in mobile view?如何使下拉菜单在桌面视图中展开但在移动视图中折叠？
【发布时间】：2022-01-04 17:21:44
【问题描述】：

目前在所有屏幕尺寸下，默认情况下，下拉菜单都是展开的，为此，我使用 $('#id_name').toogleClass('open') 来展开和折叠。但我需要让下拉菜单在桌面视图中默认展开，但在移动视图中默认折叠。

请任何人帮助我吗？

【问题讨论】：

标签： javascript html jquery css

【解决方案1】：

你可以使用window.innerHeight，让width = window.innerWidth。

   if (width <= 768) {
// you code for mobile view
}else{
  // your code for desktop view
}

768 == iPhone 10 宽度

【讨论】：

【解决方案2】：

你可以在 jss 中使用媒体查询

`
//创建一个针对目标的条件视口至少 768 像素宽

constmediaQuery=window.matchMedia('(min-width: 768px)')

function handleTabletChange(e) { 
// Check if the media query is true 
if  (e.matches) { 
// Then toggle the class here
console.log('Media Query Matched!') } 
}
// Register event listener

mediaQuery.addListener(handleTabletChange) // 初始检查
处理TabletChange（媒体查询） `

【讨论】：

【解决方案3】：

   if (width <= 768) {
  $dropdown.slideUp();
}else{
  $dropdown.slidedown();
}

它会为你工作。

【讨论】：