JQuery обнаружить ребенка <ul>

Question

HTML:

<ul class="menu">
<li><a href="http://google.com">Text</a>
    <ul>
        <li><a href="http://google.com">Text</a>
        <li><a href="#">Text</a>
        <li><a href="#">Text</a>
    </ul>
</li>
<li><a href="http://google.com">Text</a></li>
<li><a href="http://google.com">Text</a></li>
<li><a href="http://google.com">Text</a></li>
<li><a href="#">Text</a>
    <ul>
        <li><a href="#">Text</a>
        <li><a href="#">Text</a>
        <li><a href="#">Text</a>
    </ul>
</li>
<li><a href="#">Text</a></li>
</ul>

JS:

$(".menu li a").click(function() {
    $(this).parent().find("ul").toggle();
    return false;
});

Как заставить этот js работать только тогда, когда <li> имеет <ul> внутри него?

Без добавления дополнительных классов.

Не должно работать, если в текущем нет дочернего элемента <ul> <li>.

Пример этого доступен на jsfiddle.net

Лучше, если вы дадите ссылку на свой рабочий пример.

Answer 1

Попробуйте ограничить родительский элемент для возврата первого li, сейчас он находит ul из li, поскольку контейнер верхнего уровня имеет внутри себя несколько других ul, поэтому логика работает какнаписано.

$(".menu li a").click(function() {
    return !($(this).parents("li:first").find("ul").toggle().length)
});

Answer 2

Чтобы выполнить действие, если есть ребенок ul от текущего в настоящий момент li:

$('li').hover(
  function(){
    if ($(this).has('ul')) {
      // do stuff
    }
  });

Answer 3

Я собирался добавить, что вы также можете просто использовать селектор :has с селектором parent > child ( demo ):

$('.menu li:has(ul) > a').click(function() {
    $(this).parent().find('ul').toggle();
    return false;
});