Оставить применение toggleClass для родительского элемента

Question

Есть код, приведу ниже. При нажатии на <span class="menu-arrow-mobi top">кнопка</span> подставляется фон блока, в котором эта кнопка находится. Подскажите пожалуйста, как оставить класс active-top у родительского <ul class="menu-dropdown-top"> (и тем самым оставить серый фон у родительского элемента), если нажата <span class="menu-arrow-mobi top">кнопка3</span> дочернего элемента?

$('.top').click(function() {
    $(this).toggleClass('active');
    $(this).prev('ul').toggleClass('active-top');
    $('.top').not(this).removeClass('active');       
    $('.menu-dropdown-top').not($(this).prev('ul')).removeClass('active-top');
});

.active {
  color: red;
}

.active-top {
  color: green;
}

.menu-dropdown-top.active-top {
  display: block;
  background: gray;
}

.menu-dropdown-top li ul li {
  background: #gray;
}

.header__menu-main ul li .menu-dropdown-top {
  position: absolute;
  left: 0;
  z-index: -3;
  background: linear-gradient( 90deg, #009EE0 0%, #007BE5 100%, #007BE5 100%);
  display: none;
}

.header__menu-main ul li .menu-dropdown-top .menu-dropdown-top {
  position: relative;
  right: 0;
  background: transparent;
}

.header__menu-main ul li .menu-dropdown-top {
  position: relative;
  background: transparent;

}

.header__menu-main ul li .menu-dropdown-top {
  position: relative;
  background: transparent;
    margin: 20px 0;
}

.header__menu-main ul li .menu-dropdown-top.active-top {
    display: block !important;
}

li{
 position:relative;
}

#primary-menu{
position: relative;
    width: 200px;
}

.menu-arrow-mobi.active {
    transform: rotate(
90deg
);
    transition: 0.2s;
}

.menu-arrow-mobi {
    position: absolute;
    right: 0px;
    width: 40px;
    top: 0;
    height: 17px;
    transition: 0.2s;
}
.menu-arrow-mobi:before {
  content: "";
  position: absolute;
  top: 50%;
  width: 8px;
  right: 15px;
  height: 2px;
  background-color: #000;
  transform: translate(0, -100%) rotate(45deg);
}
.menu-arrow-mobi:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 15px;
  width: 8px;
  height: 2px;
  background-color: #000;
  transform: translate(0, 100%) rotate(-45deg);
}

.header__menu-main ul li .menu-dropdown-top .menu-dropdown-top {
    position: relative;
    right: 0;
    background: transparent;
}
.header__menu-main ul li .menu-dropdown-top.active-top {
    display: block !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<nav class="header__menu-main">
  <div class="menu-glavnoe-menyu-ru-container">
    <ul id="primary-menu" class="menu">
      <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-28"><a href="#">Текст</a>
        <ul class="menu-dropdown-top">
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29"><a href="#">2</a></li>
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31"><a href="#">2</a></li>
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30"><a href="#">2</a></li>
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32"><a href="#">2</a></li>
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33"><a href="#">2</a></li>
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34"><a href="#">2</a></li>
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-35"><a href="#">2</a></li>
        </ul>
        <span class="menu-arrow-mobi top"></span></li>
      <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-64"><a href="#">Текст</a></li>
      <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-65"><a href="#">Текст</a></li>
      <li i class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-66"><a href="#">Текст</a>
        <ul class="menu-dropdown-top">
          <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-67"><a href="#">Категория 1</a>
            <ul class="menu-dropdown-top">
              <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-78"><a href="#">Карточка</a></li>
              <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-79"><a href="#">Карточка</a></li>
            </ul>
            <span class="menu-arrow-mobi top"></span></li>
          <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-68"><a href="#">Категория 2</a>
            <ul class="menu-dropdown-top">
              <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-80"><a href="#">Карточка</a></li>
            </ul>
            <span class="menu-arrow-mobi top"></span></li>
        </ul>
        <span class="menu-arrow-mobi top"></span></li>
      <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-69"><a href="#">Текст</a></li>
      <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-70"><a href="#">Текст</a></li>
      <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-77"><a href="http://bdpo-wp.goodtech.by/contacts/">Текст</a></li>
      <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-72"><a href="#">Текст</a></li>
    </ul>
  </div>
</nav>

Answer 1

Вам это нужно было?

Если да, то вот объяснение:

Если у вас есть определенный класс, который у нескольких элементов, то следует пользоваться функцией jQuery closest(), чтобы обратиться именно к конкретному элементу (в данном случае кнопка). Для обращений к родителю есть функция parent().

$('.top').click(function(e) {

  $('span.active').not(this).removeClass('active');

  $(this).closest('li span').toggleClass('active');
  $('.menu-dropdown-top.active-top').removeClass('active-top');
  if ($(this).closest('li span').hasClass('active')) {
    $(this).closest('li').find('.menu-dropdown-top').addClass('active-top');
    $(this).closest('li').parent().addClass('active-top');
  };
});

.active {
  color: red;
}

.menu-dropdown-top.active-top {
  display: block;
  background: gray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="menu-item">
    <a href="#">1</a>
    <ul class="menu-dropdown-top">
      <li>2</li>
      <li>2</li>
    </ul>
    <span class="menu-arrow-mobi top">кнопка</span>
  </li>
  <li class="menu-item">
    <a href=" # ">1</a>
    <ul class="menu-dropdown-top ">
      <li>2
        <ul class="menu-dropdown-top ">
          <li>3</li>
          <li>3</li>
        </ul>
        <span class="menu-arrow-mobi top">кнопка3</span>
      </li>
      <li>2

        <ul class="menu-dropdown-top ">
          <li>3</li>
          <li>3</li>
        </ul>
        <span class="menu-arrow-mobi top">кнопка3</span>
      </li>
    </ul>
    <span class="menu-arrow-mobi top">кнопка</span>
  </li>
  <li class="menu-item">
    <a href=" # ">1</a>
    <ul class="menu-dropdown-top">
      <li>2</li>
      <li>2</li>
    </ul>
    <span class="menu-arrow-mobi top ">кнопка</span>
  </li>
</ul>

БЛОГ НА HUSL

Оставить применение toggleClass для родительского элемента

Ответы (1 шт):