Question

如何使链接仅适用于子项？

<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;
}

实际上，这是小提琴：nested menu

Answer 1

这是因为.toggle() 永远不会返回 falsy 值，即使它是在不存在的元素上调用的。这意味着您的if条件if ($(this).next('ul').toggle())将始终传递。

将其更改为：

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

<强> Working demo

切换菜单中的链接？

1 个答案: