Question

我使用phantomjs rasterize.js "http://www.google.com" 800px*800px > wait.html构建了自适应导航。它隐藏在较小的屏幕上，并且有一个使用jQuery的切换按钮。问题是，点击其中一个菜单后，菜单上的ul li项目不会关闭，点击后我无法切换回来。

这是我到目前为止的codepen。

li

<nav>
    <span class="nav-btn"></span>
    <ul class="nav">
        <li><a href="#">What</a></li>
        <li><a href="#">Where</a></li>
        <li><a href="#">When</a></li>
        <li><a href="#">Why</a></li>
    </ul>
</nav>

body {
    margin: 0;
    padding: 0;
    font-family: 'helvetica neue', helvetica;
}
.nav {
    background-color: #4f4f4f;
    list-style: none;
    margin: 0;
}
.nav > li {
    display: inline-block;
}
.nav > li > a {
    text-decoration: none;
    font-size: 40px;
    color: #fff;
}

@media (max-width: 600px) {
    .nav {
        text-align: left;
        display: none;
    }
    .nav > li {
        display: block;
    }
    .nav-btn {
        display: block;
        background-color: #333;
        color: #fff;
        text-align: center;
        cursor: pointer;
        font-size: 40px;
    }
    .nav-btn:before {
        content: "Menu";
    }

请指教。这非常令人沮丧。

Answer 1

以下是Js部分中的更新代码，它将按照您的期望工作。

$("span.nav-btn").click(function(event){
    $('ul.nav').slideToggle();
});

$(window).resize(function(){
   if ($(window).width() > 600) {
       $('ul.nav').removeAttr('style');  
   }
});

//Code need to be add,

$(".nav li").click(function(){
    if($('ul.nav').css('display') == 'block'){
          $('ul.nav').slideUp("slow");
    }
});

Answer 2

你要求两个不同的行为。

点击菜单项时，您需要将其折叠。
单击文档上的任何其他位置时，如果打开菜单，则需要折叠菜单。

因此，您将需要两个事件，一个绑定到document，另一个绑定到菜单项以获得所需的结果。

$(document).click(function(event) { 
   if(!$(event.target).closest('#bloopy').length) {
      $('ul.nav').slideUp();
   }        
});
$(".nav li").click(function(){
   $('ul.nav').slideUp("slow");
});

<强> DEMO

使用查询的响应式导航

2 个答案: