Jquery .slideToggle() 与 CSS 媒体查询

Question

我的网站有一个根据宽度变化的移动版本，当移动宽度触发媒体查询时，会将菜单更改为下拉菜单。我遇到的问题是，当用户单击下拉菜单然后再次隐藏它时，当将宽度扩展到完整 View 时，菜单仍然隐藏。

J查询:

$(document).ready(function(){
$("#drop_button")
    .click(function(){
        $("#menu").stop();
        $("#menu").slideToggle();
    });
});

CSS:

#menu {
    width:30%;  
    float:left;
}

@media (max-device-width: 380px), (max-width: 380px){
    #menu{
        display:none;
        width:calc(100% - 20px);
        height:auto;
        padding:10px;
        font-size:1em;
    }
}

如有任何帮助，我们将不胜感激。

Answer 1

.slideToggle() 扰乱了 CSS 的 display 属性。

有几种方法可以完成您的需要，其中一种是:
使用 CSS 移动优先(相反的方式)
并使用 !important 覆盖由 jQuery slideToggle 添加的样式:

#menu{                      /* Mobile-first */
  background:#faf;
  display:none;
  width:calc(100% - 20px);
}
#drop_button{display:block;}

@media (min-width: 380px){    /* non-mobile Media Query */
  #menu{
    display:block !important; /* override jQuery styles */
    width:30%;  
    float:left;
  }
  #drop_button{display:none;}
}

jsBin demo

你还有一个你没有提到的小问题，那就是:
如果您在移动设备上打开菜单，然后转到桌面设备然后返回移动设备，菜单将等待您打开，而不是总是隐藏。
要解决这个问题，您可以创建一个 $(window).on("resize", fn) 监听器，获取视口(viewport)大小并隐藏菜单(如果之前在移动设备上打开过)