主页 / 问题 / 868009
Accepted
Aleksandr
Asked:2020-08-13 17:11:28 +0000 UTC2020-08-13 17:11:28 +0000 UTC

单击孩子时如何从其他父母中删除班级？

  • 772

当你再次点击时，活动类 .menu-catalog__open 没有被删除，告诉我解决方案？

  1. 当单击具有 .menu-catalog__link 类的子元素时，具有.menu-catalog__item类的该元素的父元素将添加活动类.menu-catalog__open

  2. 单击具有 .menu-catalog__link 类的其他子元素时，将删除来自具有.menu -catalog__item 类的其他父项的活动.menu-catalog__open类

/*
1. При клике на дочерний элемент с классом .menu-catalog__link родителю этого элемента с классом .menu-catalog__item добавляется активный класс .menu-catalog__open
2. При клике на другие дочерние элементы с классом .menu-catalog__link удаляется активный класс .menu-catalog__open у других родителей с классом .menu-catalog__item.
*/

var menuCatalogOpen = 'menu-catalog__open';

$('.menu-catalog__link').on('click', function() {
  $('.menu-catalog__item').removeClass(menuCatalogOpen);
  $(this).parent().toggleClass(menuCatalogOpen);
});
.menu-catalog__open {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu-catalog">
  <li class="menu-catalog__item">
    <div class="menu-catalog__link">Первый пункт</div>
  </li>
  <li class="menu-catalog__item">
    <div class="menu-catalog__link">Второй пункт</div>
  </li>
  <li class="menu-catalog__item">
    <div class="menu-catalog__link">Третий пункт</div>
  </li>
  <li class="menu-catalog__item">
    <div class="menu-catalog__link">Четвертый пункт</div>
  </li>
</ul>

再次点击时 .menu-catalog__open 类不会被删除！

javascript

2 个回答

  1. Best Answer

    var menuCatalogOpen = 'menu-catalog__open';

$('.menu-catalog__link').on('click', function() {
  if ($(this).parent().hasClass(menuCatalogOpen)) {
    $('.menu-catalog__item').removeClass(menuCatalogOpen);
  } else {
    $('.menu-catalog__item').removeClass(menuCatalogOpen);
    $(this).parent().addClass(menuCatalogOpen);
  }
});
    .menu-catalog__open {
  color: red;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu-catalog">
  <li class="menu-catalog__item">
    <div class="menu-catalog__link">Первый пункт</div>
  </li>
  <li class="menu-catalog__item">
    <div class="menu-catalog__link">Второй пункт</div>
  </li>
  <li class="menu-catalog__item">
    <div class="menu-catalog__link">Третий пункт</div>
  </li>
  <li class="menu-catalog__item">
    <div class="menu-catalog__link">Четвертый пункт</div>
  </li>
</ul>

    • 3

  2. 在寻找问题的解决方案的过程中，我来到了另一个解决方案，我想听听专家的意见，这是一个很好的解决方案：

    var menuCatalogOpen = 'menu-catalog__open';

$('.menu-catalog__link').on('click', function() {
  var $item = $(this).parent();
  $('.menu-catalog__item').not($item).removeClass(menuCatalogOpen);
  $item.toggleClass(menuCatalogOpen);
});
    .menu-catalog__open {
  color: red;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu-catalog">
  <li class="menu-catalog__item">
    <div class="menu-catalog__link">Первый пункт</div>
  </li>
  <li class="menu-catalog__item">
    <div class="menu-catalog__link">Второй пункт</div>
  </li>
  <li class="menu-catalog__item">
    <div class="menu-catalog__link">Третий пункт</div>
  </li>
  <li class="menu-catalog__item">
    <div class="menu-catalog__link">Четвертый пункт</div>
  </li>
</ul>

    • 3

相关问题