JQuery как выбрать родителя, но не детей

Извините за то, что, вероятно, простой вопрос, но я еще не нашел способ сделать эту работу. Я новичок в JQuery, и у меня есть несколько вложенных списков, в которые я пытаюсь добавить событие click в родительский список, который будет скользить по спискам детей, и у меня есть работа, однако, если я нажму на любой из список детей, это также вызовет эффект слайда. Есть ли способ указать селектор для выполнения действия, когда выбран только родительский класс, но НЕ какой-либо из этих детей?JQuery как выбрать родителя, но не детей

Вот упрощенная версия того, что я пытаюсь сделать:

$(document).ready(function() { 
 

 
    $(".liClass1").on("click", function(event){ 
 
     event.stopPropagation(); 
 
     $(this).find(".ulClass2").slideToggle(); 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
<body> 
 
<form> 
 
\t <ul class="ulClass1"> 
 
\t \t <li class="liClass1"> 
 
\t \t \t <span>liClass1</span> 
 
\t \t \t <ul class="ulClass2"> 
 
\t \t \t \t <li class="liClass2"> 
 
\t \t \t \t \t <span>liClass2</span> 
 
\t \t \t \t </li> 
 
\t \t \t </ul> 
 
\t \t </li> 
 
\t </ul> 
 

 
</form> 
 

 
</body> 
 

 
</html>

Спасибо за помощь!

источник

2015-05-01 Mike

Было бы легче, чтобы помочь вам с сниппета, если у вас есть несколько минут. –

Вы можете использовать 'parent()' щелкнутого элемента и не допускать продолжения скрипта в соответствии со свойствами родителя. –

@SimonArnold Я добавил фрагмент кода для этого примера – Mike

$(document).ready(function() { 
 
    $(".liClass1").on("click", function(event){ 
 
     $(this).children("ul").slideToggle(); 
 
    }); 
 

 
    $(".liClass2").on("click", function(event) { 
 
     event.stopPropagation(); 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
<body> 
 
<form> 
 
\t <ul class="ulClass1"> 
 
\t \t <li class="liClass1"> 
 
\t \t \t <span>liClass1</span> 
 
\t \t \t <ul class="ulClass2"> 
 
\t \t \t \t <li class="liClass2"> 
 
\t \t \t \t \t <span>liClass2</span> 
 
\t \t \t \t </li> 
 
\t \t \t </ul> 
 
\t \t </li> 
 
\t </ul> 
 

 
</form> 
 

 
</body> 
 

 
</html>

источник

2015-05-01 19:50:32

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

Рад, что это вам помогло. Если вы по-прежнему заблокированы в своем реальном проекте, не стесняйтесь спрашивать. Мы поможем! –

Оказывается, я имел дело с двумя проблемами. Первое, с которым вам любезно помогли. Во-вторых, я работал с динамически добавленными элементами. Нашли несколько ответов о делегировании событий, и я готов идти. Еще раз спасибо! – Mike

Вы добавили обработчик щелчка на liClass1. Когда вы нажимаете на элемент ulClass2, он вызывает тот же обработчик, потому что он вложен в liClass1, поэтому событие будет размножаться!

Решение должно отказаться от любых кликов события на ulClass2:

$('.ulClass2').on('click', function(evt) { evt.stopPropagation(); })

источник

2015-05-01 18:51:44 Phil

Я добавил фрагмент кода, чтобы продемонстрировать этот пример. Я также удалил «не» часть селектора, и он ведет себя одинаково (нажатие на span под liClass2 все еще активирует переключение слайдов, и поэтому он скрыт). – Mike

Это отличное объяснение, спасибо! Теперь мне просто нужно заставить его работать с моим настоящим проектом :) – Mike

JQuery как выбрать родителя, но не детей

ответ

Смежные вопросы