Как удалить класс у других родителей при клике на дочерний?

174

29 октября 2018, 17:00

При повторном клике не снимается активный класс .menu-catalog__open подскажите решение?

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

/* 
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 при повторном клике!

Answer 1

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>

Answer 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>