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 回答