响应式菜单和 jQuery 的 slideToggle 出现问题答案

【问题标题】：Trouble with a responsive menu and jQuery's slideToggle响应式菜单和 jQuery 的 slideToggle 出现问题
【发布时间】：2014-03-13 16:10:45
【问题描述】：

我正在构建一个响应式导航菜单，但在调用 jQuery 的 slideToggle() 时无法让导航项变得可见。菜单项 (.nav_item) 适当折叠，然后在视口 display: none !important;，它们会成功切换（但始终可见）。有谁知道出了什么问题？谢谢。

CSS（指南针）：

#navUL {

    @include background-image(linear-gradient($blue_dark, $blue_light));
    text-align: center;
}

#navUL li {

    a:link, a:visited {
        color: white;
        text-decoration: none;
        display: block;
        height: 40px;
        padding: 0 25px 0 25px; 
    }
    a:hover {
        @include background-image(linear-gradient($red_dark, $red_light));
    }
    display: inline-block;
    color: white;
    line-height: 40px;
    font-family: Helvetica;
}

#nav_menu {
    display: none !important;   
}

@media only screen and (max-width: 640px) {

    #nav_menu {
        display: inline !important;
    }

    .nav_item {
        display: none !important;
    }

    #navUL li {
        display: inline;
    }
}

HTML：

<!DOCTYPE HTML>
<html>
<head>
  <link href="stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
  <!--[if IE]>
      <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
  <![endif]-->
</head>
<body>
    <div class="wrapper">
        <header>
            <img src="top_banner.jpg">
        </header>

        <nav>
            <ul id="navUL">
                <li id="nav_menu"><a href="#">Menu</a></li>
                <li class="nav_item"><a href="#">Home</a></li>
                <li class="nav_item"><a href="#">Search</a></li>
                <li class="nav_item"><a href="#">Submit</a></li>
                <li class="nav_item"><a href="#">News</a></li>
                <li class="nav_item"><a href="#">Blog</a></li>
                <li class="nav_item"><a href="#">About</a></li>
            </ul>
        </nav>

        <div id="main">

        </div>
    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>



</body>
</html>

JS：

<script>

            $(document).ready(function(){
                $('#nav_menu').on('click', function(e){
                    e.preventDefault();
                    $('.nav_item').slideToggle('slow');
                });
            });

        </script>

【问题讨论】：

标签： jquery css

【解决方案1】：

基本上只是一个specificity issue。

尽管 jQuery 的 .slideToggle() 方法添加了内联样式，但当屏幕尺寸小于 640px 时它仍然没有效果，因为您使用的是 !important。

@media only screen and (max-width: 640px)
  .nav_item {
    display: none !important;
  }
}

更具体地说，您的媒体查询中的上述样式覆盖了 jQuery 添加的样式：

<li class="nav_item" style="display: list-item;"><a href="#">Home</a></li>

要解决此问题，请删除样式表中的所有 !important 实例，并根据具体问题重新构建样式。如果我是你，我会避免像这样使用id。简单的类就足够了，并且有助于避免将来出现这样的问题。但是，如果没有更改任何 HTML，这将起作用：

#navUL #nav_menu {
    display: none;
}

@media only screen and (max-width: 640px) {
    #navUL #nav_menu {
        display: inline-block;
    }
    #navUL .nav_item {
        display: none;
    }
}

由于您已经在使用 jQuery，因此当屏幕尺寸大于 640px 时，请使用 resize event 删除 jQuery 样式。

$(window).on("resize", function () {
    if ($(window).width() > 640) {
        $('.nav_item').css('display','');
    }
}).resize();

这应该可以解决所有问题。看看this working example。

【讨论】：