我有一个逻辑问题。我有一个CSS下拉菜单,当浏览器或手机的宽度小于690pixles成为仅显示在切换上的菜单时。即用户需要按一个按钮才能显示菜单。但是,一个逻辑问题是,如果你调整broswer的大小,切换菜单打开,然后再次关闭它并将浏览器的大小调整为全宽,正常菜单消失,因为slideToggle添加了display:none; div元素的样式 - 然后导致布局问题,并且不是非常用户友好。任何想法如何解决?
HTML:
<div id="primary-menu" class="drop-down">
<div class="menu-toggle">menu-toggle</div>
<ul id="responsive" class="menu">
<li class="menu-item"><a href="#">Link 1</a></li>
<li class="menu-item"><a href="#">Link 2</a>
<ul class="child-menu">
<li class="menu-item"><a href="#">Link A</a></li>
<li class="menu-item"><a href="#">Link B</a></li>
<li class="menu-item"><a href="#">Link C</a></li>
</ul>
</li>
<li class="menu-item"><a href="#">Link 3</a></li>
</ul>
</div>
jQuery的:
$(".menu-toggle").click(function(){
$("#responsive").slideToggle( "slow", function() {});
});
答案 0 :(得分:0)
您可以在窗口调整大小时显示它并隐藏它,这样您就可以确保菜单始终在大屏幕中可见而在小屏幕中不可见。
$( window ).resize(function() {
if($( window ).width() >= 690) {
$("#responsive").show();
}
else {
$("#responsive").hide();
}
});