1

我有一个小但非常烦人的问题！

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

我的问题是，当我将屏幕低于 960 像素时，单击我的导航栏打开并再次将屏幕尺寸高于 960 像素，导航栏恢复正常，但是，如果我将屏幕尺寸低于 960 像素，请打开导航栏，然后再次关闭，屏幕尺寸超过 960px，导航栏不见了。

发生的情况是 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？

希望我说清楚了，

谢谢您的帮助。

4

1 回答 1

3

找到了解决方案！我在http://www.hongkiat.com/blog/responsive-web-nav/找到了它

它涉及一个“if”语句，声明如果屏幕宽度超过 960 像素并且您的 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 像素时删除此属性。

谢谢您的帮助！

于 2013-09-19T12:33:06.203 回答