1

如何使链接只能与子项目一起使用？

<ul>
    <li><a href="item-1">Item 1</a>
        <ul>
            <li><a href="item-1-1">item 1.1</a></li>
        </ul>
    </li>

    <li><a href="item-2">Item 2</a></li>

    <li><a href="item-3">Item 3</a>
        <ul>
            <li><a href="item-3-1">item 3.1</a>
                <ul>
                    <li><a href="item-3-1-3">item 3.1.1</a></li> <li><a href="item-3-1-2">item 3.1.2</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

我做了一个非常基本的例子。

$('ul').on('click','a',function(){

    if ($(this).next('ul').toggle()) return false;

});

这可能会切换带有子项目的链接，如果链接没有它们而不是转到 href 中的位置，但不会工作，为什么？

ul li ul {
    display:none;
}

实际上，这是小提琴：嵌套菜单

4

1 回答 1

2

这是因为即使在不存在的元素上调用它也.toggle()永远不会返回虚假值。这意味着您的if条件if ($(this).next('ul').toggle())将永远通过。

将其更改为：

$('ul').on('click','a',function(){
    if ($(this).next('ul').length > 0) {
        $(this).next('ul').toggle();
        return false;
    }
});

工作演示

于 2013-05-19T08:30:43.310 回答