Question

我正在构建一个响应式导航菜单，我在调用jQuery的slideToggle（）时无法使导航项变得可见。菜单项（.nav_item）适当地折叠，然后在视口为＆lt; 640px时变为不可见，第一个菜单项（#nav_menu）“Menu”则成为唯一可见的项目。单击后，我希望按钮重新出现并在菜单按钮下滑动。但是，当我点击时，没有任何反应，菜单项仍然不可见。如果我从菜单项中取出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>

Answer 1

基本上只是一个specificity issue。

即使jQuery的.slideToggle()方法添加了内联样式，但当屏幕大小小于640px时，它仍然没有效果，因为您正在使用{{1} }。

!important

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

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

要解决此问题，请删除样式表中的<li class="nav_item" style="display: list-item;"><a href="#">Home</a></li>的所有实例，并在设计时重新考虑特征问题。如果我是你，我会避免使用!important这样的话。简单的课程就足够了，有助于避免这样的未来问题。但是，如果没有更改任何HTML，这将起作用：

id

由于您已经在使用jQuery，因此当屏幕尺寸大于#navUL #nav_menu { display: none; } @media only screen and (max-width: 640px) { #navUL #nav_menu { display: inline-block; } #navUL .nav_item { display: none; } }时，请使用resize event删除jQuery样式。

640px

这应该照顾一切。看看this working example。

响应式菜单和jQuery的slideToggle问题

1 个答案: