0

Всем привет!

Мне необходимо, чтобы когда я кликаю на menu-item-has-children к классу sub-menu добавлялся класс show-submenu.

Мой код при клике на menu-item-has-children добавляет ко всем sub-menu класс, а мне нужно что бы он добавлялся только к тому на который я кликнул + что бы он убирался когда я кликаю по другому menu-item-has-children

Тут я написал часть кода.

$('.menu-item-has-children').click(function() {
    $('.menu-item-has-children').not(this).removeClass("show-submenu");
    $('.sub-menu').toggleClass("show-submenu");
  });
.menu-item-has-children {cursor: pointer;}
.sub-menu {display: none;}
.show-submenu {display: block;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-item-has-children">
  Мое меню
  <ul class="sub-menu">
    <li>1</li>
    <li>1</li>
    <li>1</li>
  </ul>
</div>
<hr>
<div class="menu-item-has-children">
  Мое меню
  <ul class="sub-menu">
    <li>1</li>
    <li>1</li>
    <li>1</li>
  </ul>
</div>

Помогите пожалуйста улучшить код, что бы он добавлял класс только к тому элементу на который я кликаю.

Спасибо!

1 ответ 1

1

Используй .children()

$('.menu-item-has-children').click(function() {
    $('.menu-item-has-children').not(this).removeClass("show-submenu");
    $(this).children('.sub-menu').toggleClass("show-submenu");
  });
.menu-item-has-children {cursor: pointer;}
.sub-menu {display: none;}
.show-submenu {display: block;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-item-has-children">
  Мое меню
  <ul class="sub-menu">
    <li>1</li>
    <li>1</li>
    <li>1</li>
  </ul>
</div>
<hr>
<div class="menu-item-has-children">
  Мое меню
  <ul class="sub-menu">
    <li>1</li>
    <li>1</li>
    <li>1</li>
  </ul>
</div>

1
  • Круто! Работает Я добавил .children .not(this).children('.sub-menu').removeClass("show-submenu"); Что бы удалять класс при клике на другой элемент. Это верное решение?
    – Max Watson
    23 июл 2021 в 14:41

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.