jQuery .slideToggle，display：none

我有一个逻辑问题。 我有一个CSS下拉菜单，当浏览器或手机的宽度小于690pixles成为仅显示在切换上的菜单时。 即用户需要按下按钮才能显示菜单。 但是，一个逻辑问题是，如果你调整broswer的大小，切换菜单打开，然后再次关闭它并将浏览器的大小调整为全宽，正常菜单消失，因为slideToggle添加了display：none; div元素的样式 – 然后导致布局问题，并且不是非常用户友好。 任何想法如何解决？

HTML：

 
menu-toggle
 
 
Link 1
 
Link 2 
 
Link A
 
Link B
 
Link C
 
 
 
Link 3
 
  

jQuery的：

 $(".menu-toggle").click(function(){ $("#responsive").slideToggle( "slow", function() {}); }); 

Answer 1

您可以在窗口resize时显示它并隐藏它，这样您就可以确保菜单始终在大屏幕中可见，而在小屏幕中则不可见。

 $( window ).resize(function() { if($( window ).width() >= 690) { $("#responsive").show(); } else { $("#responsive").hide(); } });