当菜单打开时，如何在页面主体中添加一个类？答案

【问题标题】：How to add a class to the body of the page, when the menu is open?当菜单打开时，如何在页面主体中添加一个类？
【发布时间】：2018-09-13 14:01:18
【问题描述】：

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

当你点击按钮时，+变成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类，关闭菜单时如何删除该类？

以下代码不起作用。如果我在外面点击，菜单会关闭，但课程仍保留在正文中。

  $('#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');
  });

【问题讨论】：

究竟是什么不起作用？当您单击按钮时，您的 sn-p 应该在 body 上切换类
请提供一个包含所有代码的工作示例...

标签： javascript css twitter-bootstrap drop-down-menu

【解决方案1】：

你为什么不试试这个，

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

【讨论】：

你可以在dialog-off-canvas-main-canvas点击上删除类而不是正文，我已经更新了我的答案，请检查。
该代码对我的网站没有影响。没有添加类

【解决方案2】：

试试这个，

 $('dropdown-menu-action').click(function(){
        if($(body).hasClass('overlay-is-navbar-collapse')){
            $('body').removeClass('overlay-is-navbar-collapse');
        }
        else{
            $('body').addClass('overlay-is-navbar-collapse');
        }
});

【讨论】：

我添加了一个指向我的问题的链接。未添加该类。

【解决方案3】：

使用.one 将侦听器附加到主体就在主体的类被添加时：

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

【讨论】：

除了“不起作用”之外，您必须详细说明，错误是什么？类没有被删除，还是什么？
我添加了一个指向我的问题的链接。未添加该类。