javascript - 当用户将大小时调整为最小宽度时，导航栏中的 Bootstrap Slide Clean Up jQuery 会移除事件状态

Question

下面的脚本运行良好，但我不知道如何做一件事:

答:当用户将尺寸调整到最小宽度阈值以下并单击切换按钮查看菜单，然后将尺寸调整回 > 767 时——尽管在现实世界中这种可能性很小—— .slide-active 类仍然存在，我不知道如何摆脱它。我可以用 css 伪造它(我已经完成了)但是当它很大时实际删除它会很好，尝试将脚本包装在 if .navbar-toggle 可见并且它只在重新加载时起作用，所以可以有那个。

---

演示:

http://jsbin.com/ucARonA/1/edit

http://jsbin.com/ucARonA/1

---

$(document).ready(function () {

    //stick in the fixed 100% height behind the navbar but don't wrap it
    $('#slide-nav.navbar .container').
        append($('<div id="navbar-height-col"></div>'));

    // Enter your ids or classes
        var toggler = '.navbar-toggle';
        var pagewrapper = '#page-content';
        var navigationwrapper = '.navbar-header';
        var menuwidth = '100%'; // the menu inside the slide menu itself
        var slidewidth = '80%';
        var menuneg = '-100%';
        var slideneg = '-80%';


    $("#slide-nav").on("click", toggler, function (e) {
      
        var selected = $(this).hasClass('slide-active');

        $('#slidemenu').stop().animate({
          left: selected ? menuneg : '0px'
        });

        $('#navbar-height-col').stop().animate({
          left: selected ? slideneg : '0px'
        });

        $(pagewrapper).stop().animate({
            left: selected ? '0px' : slidewidth
        });

        $(navigationwrapper).stop().animate({
            left: selected ? '0px' : slidewidth
        });

        $(this).toggleClass('slide-active', !selected);
        $('#slidemenu').toggleClass('slide-active');

        $('#page-content, .navbar, body, .navbar-header').
            toggleClass('slide-active');

    });

});

Answer 1

如果您需要在浏览器大小更改时切换某些内容并且它满足最小宽度，请将调整大小事件与 if 语句结合起来。

  $(window).on("resize",function(){

  if ($(window).width() > 760) {
   $(selected).removeClass('slide-active');
}

  });