使用查询的响应式导航

Question

我有使用ul li构建的响应式导航。它隐藏在较小的屏幕上，并且有一个使用jQuery的切换按钮。问题是菜单上的li项目在点击其中一个项目后将不会关闭，并且在点击时无法使其切换回去。

这是我到目前为止得到的codepen。

<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"; 
    } 

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

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

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

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

你在问两个单独的行为。

1. 单击菜单项时，需要将其折叠。
2. 当单击文档的其他任何位置时，如果菜单打开，则需要折叠菜单。

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

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

DEMO