Question

我有一个用ul和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();
    });

我做错了什么？

Answer 1

使用以下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/

Answer 2

首先，隐藏所有子菜单：

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

然后使可见的当前实际子菜单

手风琴就像菜单 - 子菜单在点击另一个链接时没有隐藏 - jQuery

2 个答案: