Удалить класс, когда переключатель свернут

Question

Я пытаюсь удалить класс из тела, когда slideToggle свернуто. Сейчас он удаляет класс при нажатии на тело и снова добавляет класс, когда открыто меню slidetoggle.

Демонстрация поведения: https://jsfiddle.net/7awLhv9t/1/

Когда тело щелкнув по нему, сверните меню и удалите класс из тела, но когда мы щелкаем по пункту меню, чтобы свернуть, он не удаляет класс из тела.

Я пытался if ($(".menu-item").hasClass("active")) { $( "body" ).removeClass( "menu-is-active" );, но он нарушает код в худшем случае.

Answer 1

Чтобы это сработало, вам, во-первых, нужно остановить распространение элементов DOM по элементам a. Это связано с обработчиком click, который вы также поместили на сам document для удаления стиля при закрытии всех меню.

Во-вторых, вы можете использовать toggleClass() только для применения класса к body, когда меню активно. Попробуйте это:

jQuery(document).ready(function($) {
  $(".nav-menu a").click(function(e) {
    e.stopPropagation();
    $(this).parent().toggleClass('active').find('.sub-menu').slideToggle('fast');
    $(".nav-menu a").not(this).parent().removeClass('active').find('.sub-menu').slideUp('fast');

    $("body").toggleClass("menu-is-active", $('.nav-menu li.active').length != 0);
  });
});

$(document).on("click", function(event) {
  var $trigger = $(".menu-item");
  if ($trigger !== event.target && !$trigger.has(event.target).length) {
    $(".sub-menu").slideUp("fast").not(this).parent().removeClass('active');
    $("body").removeClass("menu-is-active");
  }
});

.sub-menu {
  display: none;
}

body.menu-is-active {
  background: #fdff76;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav-menu">
  <li>
    <a herf="#">Menu Item</a>
    <ul class="sub-menu">
      <li class="menu-item"><a herf="#">Menu Item</a></li>
      <li class="menu-item"><a herf="#">Menu Item</a></li>
      <li class="menu-item"><a herf="#">Menu Item</a></li>
      <li class="menu-item"><a herf="#">Menu Item</a></li>
    </ul>
  </li>
  <li class="menu-item">
    <a herf="#">Menu Item</a>
    <ul class="sub-menu">
      <li class="menu-item"><a herf="#">Menu Item</a></li>
      <li class="menu-item"><a herf="#">Menu Item</a></li>
      <li class="menu-item"><a herf="#">Menu Item</a></li>
      <li class="menu-item"><a herf="#">Menu Item</a></li>
    </ul>
  </li>
  <li class="menu-item">
    <a herf="#">Menu Item</a>
    <ul class="sub-menu">
      <li class="menu-item"><a herf="#">Menu Item</a></li>
      <li class="menu-item"><a herf="#">Menu Item</a></li>
      <li class="menu-item"><a herf="#">Menu Item</a></li>
      <li class="menu-item"><a herf="#">Menu Item</a></li>
    </ul>
  </li>
  <li class="menu-item">
    <a herf="#">Menu Item</a>
    <ul class="sub-menu">
      <li class="menu-item"><a herf="#">Menu Item</a></li>
      <li class="menu-item"><a herf="#">Menu Item</a></li>
      <li class="menu-item"><a herf="#">Menu Item</a></li>
      <li class="menu-item"><a herf="#">Menu Item</a></li>
    </ul>
  </li>
  <li class="menu-item">
    <a herf="#">Menu Item</a>
    <ul class="sub-menu">
      <li class="menu-item"><a herf="#">Menu Item</a></li>
      <li class="menu-item"><a herf="#">Menu Item</a></li>
      <li class="menu-item"><a herf="#">Menu Item</a></li>
      <li class="menu-item"><a herf="#">Menu Item</a></li>
    </ul>
  </li>
  <li class="menu-item">
    <a herf="#">Menu Item</a>
    <ul class="sub-menu">
      <li class="menu-item"><a herf="#">Menu Item</a></li>
      <li class="menu-item"><a herf="#">Menu Item</a></li>
      <li class="menu-item"><a herf="#">Menu Item</a></li>
      <li class="menu-item"><a herf="#">Menu Item</a></li>
    </ul>
  </li>
</ul>