0

Не срабатывает второй раз событие по нажатию на активный элемент. В чем может быть причина, подскажите, пожалуйста?

$('.products-grid-header li.active-items').on('click', function() {
    $('.products-grid-header-item').show();

    $('.products-grid-header-item').click(function() {
        $('.products-grid-header li.active-items').removeClass('active-items');
        $(this).addClass('active-items');
        $('.products-grid-header li:not(.active-items)').each(function() {
            $(this).hide();
        });
    });        
});
.products-grid-header li:not(.active-items){
		display: none;
	}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="products-grid-header">
    <li class="products-grid-header-item active-items">
        <a class="" href="#1">1</a>
    </li>
    <li class="products-grid-header-item">
        <a class="" href="#2">2</a>
    </li>
    <li class="products-grid-header-item">
        <a class="" href="#3">3</a>
    </li>
    <li class="products-grid-header-item">
        <a class="" href="#4">4</a>
    </li>
    <li class="products-grid-header-item">
        <a class="" href="#5">5</a>
    </li>
    <li class="products-grid-header-item">
        <a class="" href="#6">6</a>
    </li>
</ul>

2
  • 1
    а зачем в клике еще 1 кли можеть его вынести отдельно
    – Саске
    19 ноя 2018 в 8:27
  • По первому клику открывается меню, второй клик выбранному элементу присвоит класс active-items, а остальные скроет (display:none).
    – EvgeniaM
    19 ноя 2018 в 8:46

1 ответ 1

3

Клик срабатывает, но второй обработчик сразу же прячет элементы. Рассмотри такой вариант

$('.products-grid-header-item').on('click', function() {
  $('.products-grid-header-item').toggle();
  $(this).show()
})
.products-grid-header li:not(.active-items) {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="products-grid-header">
  <li class="products-grid-header-item active-items">
    <a class="" href="#1">1</a>
  </li>
  <li class="products-grid-header-item">
    <a class="" href="#2">2</a>
  </li>
  <li class="products-grid-header-item">
    <a class="" href="#3">3</a>
  </li>
  <li class="products-grid-header-item">
    <a class="" href="#4">4</a>
  </li>
  <li class="products-grid-header-item">
    <a class="" href="#5">5</a>
  </li>
  <li class="products-grid-header-item">
    <a class="" href="#6">6</a>
  </li>
</ul>

2
  • Какое простое решение) спасибо большое, все работает как надо!
    – EvgeniaM
    19 ноя 2018 в 9:26
  • а как можно сделать, чтобы меню выпадало более плавно? Добавляю в toggle('slow') и пропадает первый элемент, если добавить то же свойство в show() то первый элемент сначала плавно пропадает, а потом плавно появлется, с опозданием. Переделала немного функцию, чтоб добавлялся нужный класс для стилей: $('.products-grid-header-item').on('click', function() { $('.products-grid-header-item').toggle(); $('.products-grid-header li.active-items').removeClass('active-items'); $(this).show(); $(this).addClass('active-items'); });
    – EvgeniaM
    19 ноя 2018 в 9:59

Ваш ответ

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

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