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

Question

Есть код, приведу ниже. При нажатии на <span class="menu-arrow-mobi top">кнопка</span> подставляются и удаляются классы изменяющие цвет в дочерних элементах каждого <li class="menu-item>. Подскажите пожалуйста, как сделать, что бы классы изменяющие цвет подставлялись и убирались только в рамках одного <li class="menu-item>, именно в котором нажималась <span class="menu-arrow-mobi top">кнопка</span>?

$('.top').click(function() {
  $('.top').toggleClass('active');
  $('.menu-dropdown-top').toggleClass('active-top');
});

.active {
  color: red;
}

.active-top {
  color: green;
}

ul ul ul
{
background: blue
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/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</li>
      <li>2</li>
    </ul>
    <span class="menu-arrow-mobi top">кнопка</span>
    <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</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</li>
      <li>2</li>
    </ul>
    <span class="menu-arrow-mobi top ">кнопка</span>
  </li>
</ul>
  </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>

Answer 1

Что-то такое нужно?

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/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</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</li>
            <li>2</li>
        </ul>
        <span class="menu-arrow-mobi top ">кнопка</span>
    </li>
</ul>

или такое?

$('.top').click(function() {
    $(this).toggleClass('active');
    $(this).closest('.menu-item').toggleClass('active-top');
    
    $('.top').not(this).removeClass('active');
    $('.menu-item').not($(this).closest('.menu-item')).removeClass('active-top');
});

.active {
  color: red;
}

.active-top {
  color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/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</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</li>
            <li>2</li>
        </ul>
        <span class="menu-arrow-mobi top ">кнопка</span>
    </li>
</ul>

БЛОГ НА HUSL

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

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