Question

我创建了一个导航栏，其中经典图标≣表示打开，X表示关闭。一切都很好，拉伸浏览器窗口;单击/关闭并再次放大后，≣图标将一直保留到刷新页面。对不起，我的英语很差，并提前感谢。

JS代码

var $navbar = $('.js-navbar');
var $toggleMenu = $('.js-toggle-menu'); 

$toggleMenu.click(function () {
if ($toggleMenu.hasClass("active")) {
     $navbar.slideUp("fast");
     $toggleMenu.toggleClass("active");


     $('.toggle-active').hide();
     $('.toggle-menu').show();
 } else {
     $navbar.slideDown("fast");
     $toggleMenu.toggleClass("active");
     $('.toggle-active').show();
     $('.toggle-menu').hide();
 }
 });

 $(window).resize(function () {
 if (window.innerWidth > 760) {
     $navbar.attr("style", "");
     $toggleMenu.removeClass("active");
 }
 });

Jsfiddle https://jsfiddle.net/miauhaus/jdpo1b6r/

Answer 1

在调整窗口大小时，您似乎没有隐藏按钮。让我添加两行将有助于：

 $(window).resize(function () {
 if (window.innerWidth > 760) {
     $navbar.attr("style", "");
     $toggleMenu.removeClass("active");
     $('.toggle-menu').hide(); //hide the button if it is too big
 }
 else{
 $('.toggle-menu').show(); // Show the button if the screen is small enough
 }
});

我所做的就是添加了当屏幕大于移动尺寸时隐藏按钮的功能：

     $('.toggle-menu').hide(); //hide the button if it is too big

然后我们可以通过以下方式显示屏幕：

$('.toggle-menu').show(); // Show the button if the screen is small enough

JSFIDDLE

Answer 2

出于性能原因和避免事件冒泡，我会为调整大小句柄功能延迟大约200ms，类似这样

$(window).resize(function () {
    setTimeout(function() {
        if (window.innerWidth > 760) {
            //do the dew
        }
    }, 200);
});

Javascript响应式折叠导航栏。调整大小时出现问题

2 个答案: