即使在浏览器调整大小后响应菜单也不会关闭

Question

这是我的代码： HTML:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Responsive Menu</title>
    <link rel="stylesheet" href="css/colors.css"/>
    <link rel="stylesheet" href="css/font-awesome.css"/>
</head>
<body>
<header id="topbar">
    <p>Some title</p>

    <nav class="menu">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Work</a></li>
            <li><a href="#">Contact Me</a></li>
        </ul>
    </nav>

    <div class="nav-trigger">
        <span><i class="fa fa-bars fa-2x"></i></span>
    </div>

    <nav class="mobile-menu-enabler">
        <span></span>
    </nav>
</header>

<nav class="mobile-menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Contact Me</a></li>
    </ul>
</nav>


<!-- Begin main sample site content -->
<div id="wrapper">
    <p>Lorem ipsum dolor set amet...</p>
</div>


<script src="js/jquery-2.1.3.js"></script>
<script src="js/script.js"></script>
</body>
</html>

CSS:

body {
    font-family: "Ludica Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
}

p {
    margin: 0;
    padding: 0;
    display: inline-block;
}

header {
    margin: 0;
    padding: 0;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    background-color: azure;
    border: 1px solid black;
    width: 100%;
}

/* Begin Menu Code */
.menu {
    display: inline-block;
    float: right;
}

.menu ul {
    list-style: none;
    margin: 5px 0;
}

.menu ul:last-child {
    margin-right: 10px;
}

.menu ul li {
    display: inline-block;
    margin: 0 2px;
    padding: 0;
    border: 1px solid black;
}

.menu ul li a {
    text-decoration: none;
    color: black;
    padding: 3px;
}

.menu ul li>:hover {
    background-color:black;
    color: white;
}
/* End Menu Code */

/* Mobile Menu Begin */
.mobile-menu-enabler {
    display: none;
    background-color: aqua;
}

.mobile-menu {
    display: none;
    position: relative;
    top: 38px;
    width: 100%;
    border-top: 1px solid black;
}

.mobile-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-menu ul li {
    margin: 0;
    padding: 0;
    border: 1px solid black;
    border-top: 1px solid transparent;
    text-align: center;
}

.mobile-menu ul li a {
    margin: 0;
    padding: 0;
    text-decoration: none;
    color: black;
}

.mobile-menu ul li:hover {
    background-color: darkkhaki;
}
/* Mobile Menu End */

/* Mobile Trigger Button */
.nav-trigger {
    display: none;
    text-transform: uppercase;
    color: black;
    background-color: transparent;
    margin-right: 10px;
    padding: 0;
    text-align: center;
}

.nav-trigger:hover {
    color: red;
    background-color: transparent;
}
/* End Mobile Trigger Button */


/* Dummy wrapper stuff */
#wrapper {
    clear: both;
    display: inline-block;
    position: relative;
}
/* End Dummy wrapper stuff */

@media screen and (max-width: 900px) {
    .menu {
        display: none;
    }

    .mobile-menu-enabler {
        display: block;
    }

    .nav-trigger {
        display: inline-block;
        float: right;
    }

    /*.mobile-menu {*/
        /*display: block;*/
    /*}*/
}

JavaScript:

$(document).ready(function(){ // Begin document ready function
    var headerHeight = $("#topbar").height();

    $(".nav-trigger").click(function() {
        $(".mobile-menu").slideToggle(400)
    });

    $(".mobile-menu").css("top", headerHeight);

    $("#wrapper").css("top", headerHeight);
}); // End document ready function

当页面加载时，我有一个顶部的 header 栏，其中包含虚拟链接。当浏览器宽度缩小到 900px 断点以下时，响应式菜单启动，此时单击“3 条形图标”，下拉菜单将按预期显示。

但是，如果我在没有先关闭下拉菜单的情况下将屏幕大小调整回完整大小，即使在浏览器完全展开后它仍会继续存在。

如何让 drop-down 菜单在超过 900px 的断点时自动 "untoggle"？

谢谢

编辑：截图：

这是我希望它的行为方式： callmenick.com/lab-demos/10-simple-responsive-navigation 手机导航完全展开后，浏览器展开后自动向上滑动window

Answer 1

updated.extremely 粗略的例子。调整大小

ul{list-style-type:none;}

@media screen and (min-width: 500px) {
  
  #big li{display:inline-block;width:100px;height:32px;border:1px solid red;}
  #small{display:none;}
  
  }

@media screen and (max-width: 500px) {
  
  #big{display:none;}
  #small{display:block;}
  .smaller{display:none;}
  #small li:hover~ul{display:block}
  .smaller:hover{display:block;}
  
  }

<ul id="big">
  <li>1</li>
   <li>1</li>
   <li>1</li>
   <li>1</li>
  </ul>
<ul id="small">
  <li>home1</li>
        <ul class="smaller">
          <li>3</li>
          <li>3</li>
          <li>3</li>
          <li>3</li>
        </ul>

   <li>home2</li><ul class="smaller">
          <li>3</li>
          <li>3</li>
          <li>3</li>
          <li>3</li>
        </ul>
  </ul>

Answer 2

如果您想在 window 变得太宽时真正收回移动菜单（而不仅仅是将其隐藏在 CSS 中），试试这个：

var $window = $(window), // caching the objects for performance
    $mobileMenu = $(".mobile-menu");

$window.resize(function(){

  if( $window.width() > 900) $mobileMenu.slideUp();

})

Answer 3

由于您在单击该菜单栏图标时使用 Javascript 切换显示，因此它在某种程度上几乎使 .mobile-menu 的 'display' css 无效（因为它在 css 已经加载后改变样式）。因此，您需要切换 UL 显示值（子项），而不是 .mobile-menu（父项）。这样，响应式 .mobile-menu css 就会保持原样...我相信这就是您提到的示例网站所做的。

<nav class="mobile-menu">
    <ul class="mobile-menu-items">
        <li><a href="#">Home</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Contact Me</a></li>
    </ul>
</nav>

.mobile-menu 保持 css 作为显示：none 在大屏幕上，display:block 在小屏幕上。然后，对于新的 class“.mobile-menu-items”，您最初可以将其设置为显示：none，然后使用 jQuery:

切换它

$('.nav-trigger').click(function(){
    $('.mobile-menu-items').slideToggle();
});

或者，您可以切换可见性而不是显示。

$('.nav-trigger').click(function(){
  if ( $('.mobile-menu').css('visibility') == 'hidden' )
    $('.mobile-menu').css('visibility','visible');
  else
    $('.mobile-menu').css('visibility','hidden');
});

即使在浏览器调整大小后响应菜单也不会关闭

Responsive menu doesn't close even after browser resize

html

javascript

css

jquery

responsive-design