调整浏览器大小后，响应式菜单也不会关闭

Question

Here's my code: HTML: 这是我的代码：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: 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: 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

When the page loads I have a top header bar which contains dummy links. 当页面加载时，我有一个顶部的标题栏，其中包含虚拟链接。 When the browser width is shrunk below the breakpoint at 900px the responsive menu kicks in, at this point upon clicking on the "3 bars icon" the dropdown menu appears as expected. 当浏览器的宽度缩小到900px的断点以下时，响应式菜单会弹出，此时，单击“ 3条图标”，下拉菜单就会出现。

However, if I were to resize the screen back to full size without first closing the drop down menu, it continues to stay even after the browser is fully expanded. 但是，如果我不先关闭下拉菜单就将屏幕重新调整为完整大小，即使浏览器完全展开后，它仍然保持不变。

How can I make the drop-down menu to automatically "untoggle" at the point of growing wider than the breakpoint of 900px? 如何使下拉菜单在大于900px的断点变宽时自动“解开”？

Thanks 谢谢

EDIT: Screenshots: 编辑：屏幕截图： 第一张图片

第二张图片

第三张图片

第四张图片

Here's how I'd like it to behave: callmenick.com/lab-demos/10-simple-responsive-navigation When the mobile navigation is fully expanded, it automatically slides up once the browser window is expanded 这是我希望的行为方式： callmenick.com/lab-demos/10-simple-sensitive-navigation当移动导航完全展开时，一旦扩展了浏览器窗口，它将自动向上滑动

Answer 1

Since you're using Javascript to toggle the display when you click that menu bar icon, it pretty much nullifies the 'display' css for .mobile-menu to some extent (since it is changing the style after the css has already loaded). 由于您在单击菜单栏图标时使用Javascript来切换显示，因此它在某种程度上使.mobile-menu的“显示” css无效（因为它已经在css加载后更改了样式）。 So you'll need to toggle the UL display value (child), and not the .mobile-menu (parent). 因此，您需要切换UL显示值（子级），而不是.mobile-menu（父级）。 That way the responsive .mobile-menu css stays in tact... I believe this is what that example site you mentioned does. 这样，响应式.mobile-mens 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>

keep css for .mobile-menu as display: none on large screens, and display:block for smaller. 将.mobile-menu的css保留为display：在大屏幕上无显示，而display：block为小屏幕。 Then for new class ".mobile-menu-items" you can initially set that to display: none, and toggle that with your jQuery: 然后，对于新类“ .mobile-menu-items”，您可以首先将其设置为显示：无，然后使用jQuery进行切换：

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

Alternatively you could toggle the visibility instead of the display. 或者，您可以切换可见性而不是显示。

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

Answer 2

updated.extremely crude example. 更新极端的例子。 resize 调整

 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 3

If you want to actually retract the mobile menu (and not just hide it in CSS) when the window gets too wide, try this : 如果您想在窗口过宽时实际撤回移动菜单（而不仅仅是将其隐藏在CSS中），请尝试以下操作：

 var $window = $(window), // caching the objects for performance $mobileMenu = $(".mobile-menu"); $window.resize(function(){ if( $window.width() > 900) $mobileMenu.slideUp(); })

调整浏览器大小后，响应式菜单也不会关闭

问题描述

3 个解决方案

解决方案1
1 已采纳 2015-02-03 15:43:10

解决方案2
0 2015-02-03 14:45:01

解决方案3
0 2015-02-03 14:51:10

调整浏览器大小后，响应式菜单也不会关闭

问题描述

3 个解决方案

解决方案1 1 已采纳 2015-02-03 15:43:10

解决方案2 0 2015-02-03 14:45:01

解决方案3 0 2015-02-03 14:51:10

解决方案1
1 已采纳 2015-02-03 15:43:10

解决方案2
0 2015-02-03 14:45:01

解决方案3
0 2015-02-03 14:51:10