如何防止导航在激活停用移动按钮后消失

Question

这是一个很难回答的问题，但我会尽我所能：

如果，请转到http://msukkar.tumblr.com并调整窗口大小(如果你使用的是台式机/笔记本电脑)，直到汉堡菜单图标出现，然后点击它以获得下拉菜单，再次点击它以隐藏它。你会发现，当你将窗口调整为全宽时，原始导航不见了。

我很好奇我该如何才能防止这种情况的发生。我擅长HTML&CSS，但对Javascript来说非常新。

我使用的Javascript是：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function ($) {
/* prepend menu icon */
$('#menu_wrapper').prepend('<img id="mobile_menu" src="http://msukkar.com/wp-content/themes/pptitan/images/mobile_menu.png" alt="">');
/* toggle nav */
$("#mobile_menu").on("click", function () {
$("#menu_border_wrapper").slideToggle();
$(this).toggleClass("active");
});
});
});
</script>

菜单的HTML是

<div id="menu_wrapper">
<!-- Begin logo -->
<a id="custom_logo" class="logo_wrapper" href="http://msukkar.com" style="font-family: 'Oswald', sans-serif; letter-spacing: 1px; font-size: 14px; margin-top: 16px; ">
MATT SUKKAR
</a>        
<!-- End logo -->
<!-- Begin main nav -->
<div id="nav_wrapper">
<div class="nav_wrapper_inner">
<div id="menu_border_wrapper">
<div class="menu-home-container">
<ul id="main_menu" class="nav">
<li id="menu-item-1235" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1235">
<a href="http://msukkar.tumblr.com" style="color: #ff0000">
Blog
</a>
</li>
<li id="menu-item-1485" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1235">
<a href="http://msukkar.com/contact/">
Contact
</a>
</li>
</ul>
</div>                  
<select>
<option selected="selected" value="">
- Main Menu -
</option>
<option selected="selected" value="http://msukkar.tumblr.com">
Blog
</option>
<option value="http://msukkar.com/contact/">
Contact
</option>
</select>
</div>
</div>
</div>

我希望我为大家解释得足够好。提前感谢您的帮助，如果需要，我会尽力进一步澄清。

Answer 1

这是您的问题：

$("#menu_border_wrapper").slideToggle();

当你点击汉堡时，它会显示和隐藏你的菜单。

问题是，当您在桌面视图中时，整个菜单都包含在#menu_border_wrapper中，并按原样显示。然后，您向下调整移动大小，然后单击汉堡包。第一次单击时，#menu_border_wrapper向下滑动，您的菜单将可见。第二次单击时，#menu_border_wrapper向上滑动，您的菜单将不可见。这在手机上很好，因为汉堡图标本身不包含在#menu_border_wrapper中，但当你将窗口调整回桌面时，菜单就不见了！记得第二次点击时菜单是如何向上滑动并设置为display: none的。既然您的桌面大小菜单包含在#menu_border_wrapper中，那么它就不在了。

可能有很多方法可以解决这个问题。将桌面上的实际菜单按钮也移动到#menu_border_wrapper之外，为移动和桌面制作两个完全唯一的菜单，或者在桌面上将#menu_border_wrapper设置为display: block !important。

希望它能有所帮助！