使用查询的响应式导航

responsive navigation using query

本文关键字：导航 响应 查询      更新时间：2023-09-26

我有一个使用ul li构建的响应式导航。它隐藏在较小的屏幕上，并且有一个使用jQuery的切换按钮。问题是菜单上的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";
    }

$("span.nav-btn").click(function(event){
    $('ul.nav').slideToggle();
});
$(window).resize(function(){
    if ($(window).width() > 600) {
        $('ul.nav').removeAttr('style');  
    }
});

请建议。

你要求两个独立的行为。

  1. 单击菜单项时，需要将其折叠。
  2. 当点击文档的任何地方时，你需要菜单在打开时折叠。

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

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

下面是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");
    }
});
相关文章：