Question

我的网站的移动版本会根据宽度进行更改，当移动宽度触发媒体查询时，会将菜单更改为下拉列表。我遇到的问题是当用户点击下拉菜单然后再次隐藏它时，当将宽度扩展到完整视图时，菜单仍然是隐藏的。

Jquery的：

$(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)侦听器，获取视口大小并隐藏菜单（如果之前在移动设备上打开过）

Answer 2

我希望在CSS中使用Jquery：

    $( window ).resize(function() {
        if ($(window).width() > 380){
            $("#menu").css("display","inline");
            //Ensure menu is always visible if the window width is larger than 380px.
        }
        else
        {
            $("#menu").css("display","none");
            //Hide the menu any time the window is resized.
        }
    });

带有CSS媒体查询的Jquery .slideToggle（）

2 个答案: