0

ul an li で作成したメニューがあり、アンカーでクリック イベントがトリガーされたときに他のサブメニューを非表示にしようとしています。HTMLメニューはこんな感じ

    <ul id="navigation">
        <li>
            <a href="javascript:void(0)">link 1</a>
            <ul class="subnavi">
                <li><a href="#">sublink 1</a></li>
                <li><a href="#">sublink 2</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0)">link 2</a>
            <ul class="subnavi">
                <li><a href="#">sublink 3</a></li>
                <li><a href="#">sublink 4</a></li>
            </ul>
        </li>
        <li class="active">
            <a href="javascript:void(0)">link 3</a>
            <ul class="subnavi">
                <li><a href="#">sublink 5</a></li>
                <li><a href="#">sublink 6</a></li>
            </ul>
        </li>
        <li>
            <a href="#">link 4</a>
        </li>
    </ul>

CSSコードは次のようになります

#navigation li ul{ display: none;}

Jquery部分は次のようになります

    $('#navigation > li:has(ul) > a').on("click",function(ev) {
        $(this).siblings('ul').toggle().end().siblings().find('ul').hide();
        ev.preventDefault();
    });

私は何を間違っていますか？

4

2 に答える 2

2

次の jQuery コードを使用します。

   $('#navigation > li:has(ul) > a').on("click",function(ev) {
       $('#navigation .subnavi').hide(); //This hides all the sub menus
       $(this).siblings('ul').toggle().end().siblings().find('ul').hide();
        ev.preventDefault();
    });

ここにデモがあります：http://jsfiddle.net/82jJv/

于 2013-09-27T12:35:15.880 に答える
1

最初に、すべてのサブメニューを非表示にします。

$('.subnavi').hide();

次に、現在の実際のサブメニューを表示します

于 2013-09-27T12:33:24.303 に答える