我有一个导航栏，该导航栏在某个断点后变为带有slidetoggle函数的按钮，并且我已经有了处理它的jquery。在该移动布局中，还可以在单击某个项目后使切换后的导航幻灯片向上备份。
jQuery(document).ready(function($){
/* prepend menu icon */
$('#nav-wrap').prepend('<div id="menu-icon">Menu</div>');
/* toggle nav */
$("#menu-icon").on("click", function(){
$(".nav").slideToggle("slow");
$(this).toggleClass("active");
});
if (document.documentElement.clientWidth < 860) {
$(".navitem").on("click", function(){
$(".nav").slideToggle("slow");
$(this).toggleClass("active");
});
} });
问题是，我的
.nav一直被单击直到876的宽度都隐藏了。我怀疑这是由于滚动条引起的，但是我不知道如何解决它。该网站具有单页布局，因此导航栏保持在该位置很重要。有任何想法吗？
尝试以下操作：http://jsfiddle.net/0bbjn46g/，尽管它不能解决问题。在chrome（以及我假设的所有Webkit浏览器）中，发生的事情是，当宽度为861-876时，单击其中一项后
.nav消失了。 最佳答案
我只是想刺探您的问题，盲目地投掷飞镖，但：
您的问题（据我了解）是您的导航项在某个时刻消失了。我假设当您将窗口缩小到移动按钮菜单并单击以隐藏菜单然后调整窗口大小时它们消失了，导航项消失了。
一个简单的解决方案是，当浏览器的大小大于移动设备的大小时，将导航菜单强制为display: block !important;：http://jsfiddle.net/0bbjn46g/6/
jQuery(document).ready(function($){
/* prepend menu icon */
$('#nav-wrap').prepend('<div id="menu-icon"><a><img id="navicon" src="img/navicon.svg"></a></div>');
/* toggle nav */
$("#menu-icon").on("click", function(){
$(".nav").slideToggle("slow");
$(this).toggleClass("active");
});
if (document.documentElement.clientWidth < 860) {
$(".navitem").on("click", function(){
$(".nav").slideToggle("slow");
$(this).toggleClass("active");
});
}
});@media screen and (min-width: 861px) {
#menu-icon {
display: none;
}
.nav {
display: inline;
}
.nav {
display: block !important; /** note: when window is bigger than 861, force nav to show **/
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="menu-icon"><a>menu</a></div>
<div class="nav" id="home">
<ul>
<li><a class="navitem" href="#">item 1</a></li>
<li><a class="navitem" href="#">item 2</a></li>
<li><a class="navitem" href="#">item 3</a></li>
<li><a class="navitem" href="#">item 4</a></li>
</ul>
</div>
</body>