Выберите только первый UL Li в Jquery

Question

У меня есть HTML код

<ul id="menu1"> 
<li> //When Click this will fire Jquery event 
    <a href="">Some word</a> 
    <ul style="display:block;"> 
     <li>Hello</li> 
    </ul> 
    </li> 
    <li> //When Click this will fire Jquery event 
    <a href="">Some word</a> 
    <ul style="display:block;"> 
     <li>Hello</li> 
    </ul> 
    </li> 
    <li> //When Click this will fire Jquery event 
    <a href="">Some word</a> 
    <ul style="display:block;"> 
     <li>Hello</li> 
    </ul> 
    </li> 
</ul> 

Мой вопрос, я хочу, чтобы стрелять мой JQuery код, когда я нажимаю главный элемент UL LI, я не хочу стрелять JQuery для внутренний UL LI. но некоторые, как бы ни, как я стараюсь, она будет срабатывать все LI, ниже мой JQuery

$('#menu1 li').click(function() { 
    $(this).find('ul').toggle(); 
}); 

Я также пытаюсь #ul Ли, #ul Ли с. но кажется, что ничего не работает. это в любом случае добиться того, что мне нужно?

Answer 1

Вы можете использовать селектор детских комбинаторов (>), чтобы выбрать только верхний уровень li детей элемента #menu1. Попробуйте следующее:

$('#menu1 > li').click(function() { 
    $(this).find('ul').toggle(); 
}); 

Обратите внимание, что ваш код не соответствует описанию того, чего вы пытаетесь достичь. Вам нужно вместо этого разместить обработчик событий на элементе a на верхнем уровне li и изменить обход DOM, чтобы найти соответствующий ul, чтобы переключить его. Также обратите внимание, что ваш HTML недопустим - вам не хватает тегов </li>. Попробуйте это:

$('#menu1 > li a').click(function(e) { 
 
    e.preventDefault(); 
 
    $(this).parent().find('ul').toggle(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="menu1"> 
 
    <li> 
 
    <a href="">Some word</a> 
 
    <ul> 
 
     <li>Hello</li> 
 
    </ul> 
 
    </li> 
 
    <li> 
 
    <a href="">Some word</a> 
 
    <ul> 
 
     <li>Hello</li> 
 
    </ul> 
 
    </li> 
 
    <li> 
 
    <a href="">Some word</a> 
 
    <ul> 
 
     <li>Hello</li> 
 
    </ul> 
 
    </li> 
 
</ul>