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()ためです。これは、条件が常に合格することを意味します。ifif ($(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 に答える