javascript - 当菜单打开时，如何将类添加到页面主体？

Question

我在网站的左下角创建了一个“更多”按钮来显示菜单。

当你点击按钮时，+变成x

https://www.s1biose.com/groupe/recettes-et-astuces

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdown-menu-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <div class="fa-4x">
      <span class="fa-layers fa-fw">
        <i class="fas fa-circle"></i>
        <i class="fa-inverse fas fa-plus" data-fa-transform="shrink-6"></i>
      </span>
    </div>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdown-menu-action">
    <li><a href="/profil" data-drupal-link-system-path="profil"><i class="fas fa-id-card fa-lg"></i> Créer mon profil</a></li>
  </ul>
</div>

如何在菜单打开时向页面主体添加类 .overlay-is-navbar-collapse 并在菜单关闭时删除该类？

以下代码无效。如果我在外部单击，菜单会关闭，但类仍保留在 body 上。

  $('#dropdown-menu-action').on('click', () => {
       $('body').toggleClass('overlay-is-navbar-collapse');
  });

我已经尝试了下面的代码，但是它不起作用:

  $('#dropdown-menu-action').on('shown.bs.dropdown', function () {
       $('body').addClass('overlay-is-navbar-collapse');
  });

  $('#dropdown-menu-action').on('hidden.bs.dropdown', function () {
       $('body').removeClass('overlay-is-navbar-collapse');
  });

Answer 1

使用 .one 将监听器附加到主体 ，当主体的类被添加时:

$('#dropdown-menu-action').on('click', () => {
  $('body').addClass('overlay-is-navbar-collapse');
  $('body').one('click', () => {
    $('body').removeClass('overlay-is-navbar-collapse');
  });
});