我遇到了一个小但非常烦人的问题!
在我的 CSS 中，当屏幕尺寸高于 960 像素时，我设置了一个导航栏。当屏幕尺寸低于 960px 时，导航栏被隐藏，并显示一个黑色栏，单击该黑色栏时，会显示主导航栏，然后使用 slipToggle() 事件再次隐藏它。
我的问题是，当我将屏幕尺寸降低到 960 像素以下时，单击导航栏打开并再次将屏幕尺寸提高到 960 像素以上，导航栏会正常返回，但是，如果我将屏幕尺寸降低到 960 像素以下，则切换导航栏打开，然后再次关闭，并将屏幕尺寸设置为 960px 以上，导航栏消失。
发生的情况是，即使 CSS @media 规则设置为高于 960 像素时的 display:block，slideToggle 仍然会导致导航栏显示:none。
我尝试了 if 语句:
$(document).ready(function(){
if ($(window).width() < 960){
$('#navcontainer480').click(function(){
$('#navcontainer').slideToggle('slow');
});
}
else{
$('#navcontainer').off('slideToggle');
}
});
我也尝试过 else ifs, .unbind();等等
也许我没有正确使用它们。
当我将屏幕返回到 960 像素以上时，如何让 SlideToggle 不关闭我的 div？
希望我说清楚了，
感谢您的帮助。
最佳答案
找到解决方案了!我在http://www.hongkiat.com/blog/responsive-web-nav/找到了它
它涉及一个“if”语句，声明如果屏幕宽度超过 960px 并且您的 div 被隐藏，则removeAttr('style');
我的 jquery 现在看起来像这样:
$(document).ready(function(){
var navcontainer = $('#navcontainer');
$('#navcontainer480').on('click', function(){
navcontainer.slideToggle();
});
$(window).resize(function(){
var width = $(window).width();
if (width > 960 && navcontainer.is(':hidden')){
navcontainer.removeAttr('style');
}
});
});
这基本上是说，如果您的 div 由于屏幕尺寸低于 960px 时的 SlideToggle 而“隐藏”，则当屏幕尺寸高于 960px 时删除此属性。
感谢您的帮助!
关于jquery - 当屏幕尺寸恢复到更大尺寸时，slideToggle 不显示 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18873425/