Question

我有一个小但非常讨厌的问题！

在我的CSS中我设置了一个导航栏，用于屏幕尺寸大于960px时。当屏幕尺寸低于960px时，导航栏将被隐藏，我会显示一个黑色条，单击该条时，将显示主导航栏，并使用slideToggle（）事件再次隐藏它。

我的问题是，当我将屏幕低于960px时，单击我的导航栏打开并再次将屏幕尺寸调整到960px以上，导航栏将恢复正常，但是，如果我将屏幕尺寸降低到960px以下，则切换导航栏打开，然后再次关闭，并使屏幕大小超过960px，导航栏丢失。

正在发生的事情是slideToggle仍然导致导航栏显示：none，即使CSS @media规则设置为display：block at 960px以上。

我尝试了if语句：

$(document).ready(function(){

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

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

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

   });
 }

else{

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

}

});

我也尝试过ifs，.unbind（）;等

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

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

希望我明确表示，

感谢您的帮助。

Answer 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由于屏幕尺寸低于960px时的slideToggle而被“隐藏”，当屏幕尺寸高于960px时删除此属性。

感谢您的帮助！

slideToggle在屏幕尺寸恢复到更大尺寸时不显示div

1 个答案: