解决方案1：为两个栏添加css类

Question

我不知道如何提出我的问题。

在我的网站（Drupal 8和Bootstrap 4）上，左上方有一个导航菜单，右上方有一个菜单：

https://dev.s1biose.com/fr/boutique/poupette-cacahuete

当我打开导航菜单时，背景变暗。过滤器菜单也是一样。

问题：

如果我在不关闭导航菜单的情况下打开它并打开过滤器菜单，则不会有深色背景。

为什么不显示效果？

左下方的加号按钮存在相同的问题。我单击加号按钮，底部变暗。如果我直接单击左上方的菜单，则底部不会变暗。如果我关闭并打开菜单，它将起作用。

这是我的自定义JS文件：

/**
 * @file
 * Global utilities.
 *
 */
(function ($, Drupal) {

  'use strict';

  $(document).click(function (event) {
    if ($(event.target).is('button')) {
      $('.navbar-collapse').collapse('hide');
    }
  });

  $(document).click(function (event) {
    if (!$(event.target).is('.navbar-collapse *')) {
      $('.navbar-collapse').collapse('hide');
    }
  });

  $('.collapse-navbar-first').on('show.bs.collapse', function () {
    $('body').addClass('bs-body-overlay');
  });

  $('.collapse-navbar-first').on('hide.bs.collapse', function () {
    $('body').removeClass('bs-body-overlay');
  });

  $('.collapse-navbar-second').on('show.bs.collapse', function () {
    $('body').addClass('bs-body-overlay');
  });

  $('.collapse-navbar-second').on('hide.bs.collapse', function () {
    $('body').removeClass('bs-body-overlay');
  });

  $('.collapse-navbar-first').on('show.bs.collapse', function () {
    $('.bs-background').addClass('bs-background-overlay');
  });

  $('.collapse-navbar-first').on('hide.bs.collapse', function () {
    $('.bs-background').removeClass('bs-background-overlay');
  });

  $('.collapse-navbar-second').on('show.bs.collapse', function () {
    $('.bs-background').addClass('bs-background-overlay');
  });

  $('.collapse-navbar-second').on('hide.bs.collapse', function () {
    $('.bs-background').removeClass('bs-background-overlay');
  });

})(jQuery, Drupal);

Answer 1

导致此错误的原因是，当打开另一个菜单时，它尝试在该元素（已经具有该元素）上添加类，然后在关闭时，第一个菜单删除该类。

为此您可以做的一个简单修复（可能不是最佳解决方案）是将所有addClass和removeClass更改为toggleClass，如下所示：

$('.collapse-navbar-first').on('show.bs.collapse', function () {
  $('.bs-background').toggleClass('bs-background-overlay');
});
$('.collapse-navbar-first').on('hide.bs.collapse', function () {
  $('.bs-background').toggleClass('bs-background-overlay');
});

并且为了使代码更短，您可以像这样加入两个事件：

$('.collapse-navbar-first').on('show.bs.collapse hide.bs.collapse', function () {
  $('.bs-background').toggleClass('bs-background-overlay');
});

Answer 2

您要附加事件处理程序，将具有与触发器相同事件的代码分组可能是个好主意。（我已经在代码段中做到了这一点。）

事件处理程序按事件发生的顺序触发。您看到的行为是由于每个事件处理程序中的代码所致：

用户单击导航栏左按钮
事件：$('.collapse-navbar-first').on('show.bs.collapse')被触发。
它添加了bs-body-overlay
---等待下一个用户单击------
用户单击导航栏右按钮
事件$('.collapse-navbar-second').on('show.bs.collapse)被触发。
它还尝试添加bs-body-overlay，尽管它已经存在。
触发了事件$('.collapse-navbar-first').on('hide.bs.collapse')，因为在导航栏外部发生了点击
bs-body-overlay已删除
那么您就处于描述的状态。

解决方案1：为两个栏添加css类

bs-body-overlay基本上用于左右导航栏，您可以将该类分为2个单独的类，以免彼此干扰 bs-body-overlay-left和bs-body-overlay-right应用相同的规则，它们可以在元素上共存。

解决方案2：检查是否有任何导航栏打开

您还可以检查是否打开了任何导航栏，并且在这种情况下不删除bs-body-overlay类。由于bootstrap仍在进行动画处理，因此对此进行检查有点困难。 IE的左侧和右侧栏都获得collapsing类，然后获得show类。

解决方案3：手动跟踪打开/关闭的条形数量

您可以跟踪打开/关闭的数量，仅在确定可以删除bs-body-overlay时才删除我会选择解决方案1

css：

.bs-body-overlay, .bs-body-overlay-left, .bs-body-overlay-right {
    overflow: hidden;
}

.bs-background-overlay. .bs-background-overlay-left, .bs-background-overlay-right {
    opacity: .8;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1001;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    transition: .5s ease-out;
}

js：

/**
 * @file
 * Global utilities.
 *
 */
(function ($, Drupal) {

  'use strict';

  $(document).click(function (event) {  // fired whenever anywhere is clicked

    if ($(event.target).is('button') || !$(event.target).is('.navbar-collapse *')) {
        // hide the elemnt when the click wasn't on the navbar or the button was clicked
      $('.navbar-collapse').collapse('hide');
    )   
  });

  $('.collapse-navbar-first').on('show.bs.collapse', function () {
    $('body').addClass('bs-body-overlay-left');
    $('.bs-background').addClass('bs-background-overlay-left');
  });

  $('.collapse-navbar-second').on('show.bs.collapse', function () {
    $('body').addClass('bs-body-overlay-right');
    $('.bs-background').addClass('bs-background-overlay-right');
  });

  $('.collapse-navbar-first').on('hide.bs.collapse', function () {
    $('body').removeClass('bs-body-overlay-left');
    $('.bs-background').removeClass('bs-background-overlay-left');
  });

  $('.collapse-navbar-second').on('hide.bs.collapse', function () {
    $('body').removeClass('bs-body-overlay-right');
    $('.bs-background').removeClass('bs-background-overlay-right');
  });
})(jQuery, Drupal);

如何应用2个动画？

2 个答案:

解决方案1：为两个栏添加css类

解决方案2：检查是否有任何导航栏打开

解决方案3：手动跟踪打开/关闭的条形数量

css：

js：