当屏幕尺寸恢复到更大尺寸时，slideToggle 不显示 div答案

【问题标题】：slideToggle not displaying div when screen size returns to bigger size当屏幕尺寸恢复到更大尺寸时，slideToggle 不显示 div
【发布时间】：2013-09-18 13:22:25
【问题描述】：

我遇到了一个小但非常烦人的问题！

在我的 CSS 中，当屏幕尺寸高于 960 像素时，我设置了一个导航栏。当屏幕尺寸低于 960 像素时，导航栏被隐藏，我会显示一个黑条，单击它时会显示主导航栏，然后使用 slideToggle() 事件再次隐藏它。

我的问题是，当我将屏幕降到 960 像素以下时，单击我的导航栏打开并再次将屏幕尺寸拉到 960 像素以上，导航栏恢复正常，但是，如果我将屏幕尺寸降到 960 像素以下，切换导航栏打开，然后再次关闭，屏幕尺寸超过 960 像素，导航栏不见了。

发生的情况是 slideToggle 仍然导致导航栏显示：无，即使 CSS @media 规则设置为 display:block 当高于 960 像素时。

我尝试了一个 if 语句：

$(document).ready(function(){

 if ($(window).width() < 960){

   $('#navcontainer480').click(function(){

     $('#navcontainer').slideToggle('slow');

   });
 }

else{

    $('#navcontainer').off('slideToggle');

}

});

我也试过 else ifs, .unbind();等等

也许我没有正确使用它们。

当我返回 960 像素以上的屏幕时，如何让 slideToggle 不关闭我的 div？

希望我说清楚了，

感谢您的帮助。

【问题讨论】：

“如果”运行良好？
插入滑动切换尝试在相应的 if/else 块中使用 slideUp 和 slideDown。这可以帮助您防止重复的不匹配切换。
“if”在没有 else 的情况下效果很好！我只是在尝试其他语句来尝试不同的解决方案，但它不起作用。我读到 slideUp 和 slideDown 已被弃用？
已弃用？？我正在使用 min.js 1.8v，我可以同时使用。
抱歉，我忘记了我在哪里读到关于 slideUp 和 slideDown 被弃用的信息。我错了。我已经使用了这些事件，但是我遇到了同样的问题，如果我向下滑动 div，然后再次向上滑动，并将屏幕尺寸恢复到大于 960 像素，则 div 仍然隐藏。任何关于如何删除幻灯片 jQuery 的建议将不胜感激。当屏幕高于 960px 时，我只需要 jQuery 没有影响！谢谢

标签： jquery slidetoggle

【解决方案1】：

找到了解决办法！我在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 在屏幕尺寸低于 960 像素时因为 slideToggle 而被“隐藏”，则当屏幕尺寸高于 960 像素时删除此属性。

感谢您的帮助！

【讨论】：

恭喜！！在这种情况下 .removeClass() 也可以帮助你摆脱 CSS(style) 属性......无论如何，你已经做到了！