折叠关闭时,不会删除正文类

时间:2018-01-25 23:12:55

标签: javascript jquery twitter-bootstrap

我的bootstrap主题3上有两个菜单崩溃,我想:

  • 当其中一个折叠菜单打开时,另一个关闭。
  • 当其中一个折叠菜单打开时,后面的页面变得不清楚。
  • 当其中一个折叠菜单打开时,后面的页面滚动被阻止。
  • 当其中一个折叠菜单打开时,后面的页面将被阻止。

我的问题:

当崩溃关闭时,主体的“overlay-is-navbar-collapse”类不会被删除。为什么?

这是我的代码:

(function ($) {
  var $document = $(document);
  var $body = $(document.body);

  // Wrap everything in a DOM ready handler.
  $document.ready(function () {

    // Save the navbar collapse selectors so making updates/tracking easier.
    var navbarCollapseFirst = '#navbar-collapse-first';
    var navbarCollapseSecond = '#navbar-collapse-second';
    var navbarCollapseBoth = navbarCollapseFirst + ',' + navbarCollapseSecond;

    // Save the jQuery instances (for performance).
    var $navbarCollapseFirst = $(navbarCollapseFirst);
    var $navbarCollapseSecond = $(navbarCollapseSecond);

    // Variable for saving which navbar collapse is currently open.
    var $open = $();

    // For performance reasons, bind evens directly on the document. jQuery
    // allows you to pass a targeting selector between the event and handler
    // so it will only call said handler when the event matches said selector.
    $document
      // Bind "show" event for first navbar collapse.
      .on('show.bs.collapse', navbarCollapseBoth, function (e) {
        // Indicate that the first is open.
        $open = $(e.target);

        // Collapse the first if it's not the one that just opened.
        if (!$navbarCollapseFirst.is($open)) {
          $navbarCollapseFirst.collapse('hide');
        }
        // Collapse the second if it's not the one that just opened.
        else if (!$navbarCollapseSecond.is($open)) {
          $navbarCollapseSecond.collapse('hide');
        }

        // Add the body class.
        $body.addClass('overlay-is-navbar-collapse');
      })
      // Bind "hide" event for first navbar collapse.
      .on('hide.bs.collapse', navbarCollapseFirst, function (e) {
        // Indicate that the first is open.
        var $hide = $(e.target);

        // Remove the first as the opened navbar collapse.
        if ($navbarCollapseFirst.is($hide) && $navbarCollapseFirst.is($open)) {
          $open = $();
        }
        // Remove the second as the opened navbar collapse.
        else if ($navbarCollapseSecond.is($hide) && $navbarCollapseSecond.is($open)) {
          $open = $();
        }

        // Remove the body class if there is no open navbar collapse.
        if (!$open[0]) {
          $body.removeClass('overlay-is-navbar-collapse');
        }
      });
  });

})(window.jQuery);

0 个答案:

没有答案