javascript - 如果一个元素有兄弟元素该怎么办

Question

我有一个无序列表作为左侧导航，其中有很多链接。大多数列表项都有另一个无序列表作为与其关联的子菜单。然而，一些链接没有子菜单。我想禁用具有子菜单的链接上的默认单击行为，以便我可以以动画方式打开子菜单。但在没有子菜单的链接上，我需要让链接可单击。 我必须执行此操作的 JavaScript 是:

$(function(){
    if($("#leftNav ul:first > li > a").siblings().size() > 0){
        $("#leftNav ul:first > li > a").click(function(e){
            e.preventDefault();
        });
    }   

问题在于，这会禁用所有链接的默认单击行为，而不仅仅是具有同级链接的链接。 左侧导航的 html 看起来像这样

<div id="leftNav">
    <ul>
        <li>
            <a href="#">Link 1</a>
            <ul>
                <li><a href="#">Submenu Link 1</a></li>
                <li><a href="#">Submenu Link 2</a></li>
                <li><a href="#">Submenu Link 3</a></li>
            </ul>
        </li>
        <li><a href="#">Link 2</a></li>
     </ul>
</div>

因此需要删除链接 1 上的点击行为，因为它具有 <ul>作为 sibling 。链接 2 没有同级，因此应该单独保留它。

Answer 1

一种方法是查找具有后代 ul 的 li 元素，并在该 li 中查找 a 并定位这些:

$('#leftNav li:has("ul")').find('a').each(
    function(){
        $(this).click(
            function(){
                alert("No clicking here");
                return false;
            });
    });

JS Fiddle demo .

<小时/>

编辑添加修订后的 jQuery:

$('#leftNav li:has("ul")').find('a').each(
    function(){
        $(this).click(
            function(){
                alert("No clicking here");
                return false;
            });
    });
$('#leftNav li:has("ul")').hover(
    function(){
        $(this).find('ul').slideDown();   
    },
    function(){
        $(this).find('ul').slideUp();
    });

Slightly more useful JS Fiddle demo .