Jquery - 点击下拉菜单答案

【问题标题】：Jquery - dropdown menu on clickJquery - 点击下拉菜单
【发布时间】：2014-02-24 06:27:46
【问题描述】：

我对 jquery 比较陌生，正在寻求帮助。目的是单击附加到 ul 的列表项并使其出现，同时任何其他列表项消失。只有活动的是可见的

我遇到的问题是，当我单击另一个列表项时，活动项会消失（如预期的那样），但它不会显示另一个项，它仍然是隐藏的。我正在寻找一种方法来显示列表，同时隐藏那些处于非活动状态的列表。

html:

<div id="secondary-nav"><!--secondary-nav-->    
    <ul>
        <li><a href="#.html">Current Article</a>
            <ul>
                <li><a href="#.html">Example 1</a></li>
            </ul>
        </li>
        <li class="active"><a href="#.html">Past Articles</a>
            <ul>
                <li><a href="#.html">Example 1</a></li>
                <li><a href="#.html">Example 2</a></li>
                <li><a href="#.html">Example 3</a></li>
            </ul>
        </li>
    </ul>   
</div><!--/secondary-nav-->

css:

#secondary-nav {
    float:left;
    height:auto;
    width:23%; /*210px*/
    border-right:2px solid #000;
    position:relative;
}

/*heading styles*/
#secondary-nav ul li {
    padding: 0 10px;
    list-style-type: none;
}

#secondary-nav ul li a {
    font-family:TrajanPro;
    font-size:1em;
    line-height: 32px;
    color:#000;
}

/*links*/
#secondary-nav ul ul li a {
    display: block;
    font-family:TrajanPro;
    font-size:0.9em;
    line-height: 27px;
    text-decoration: none;
    color:#000;
    transition: all 0.15s;
}

#secondary-nav ul li a:hover {
    display:block;
    color:#af2931;
    text-decoration:underline;
}

#secondary-nav ul ul {
    display: none;
}

#secondary-nav li.active ul {
    display: block;
}
/css

jquery 使用 1.7.1

$(document).ready(function(){
    $("#secondary-nav ul").click(function(){
        //slide up all the link lists
        $("#secondary-nav ul ul").slideUp();
        //slide down the link list below the h3 clicked - only if its closed
        if(!$(this).next().is(":visible"))
        {
            $(this).next().slideDown();
        }
    })
})

【问题讨论】：

标签： javascript jquery drop-down-menu html.dropdownlistfor cascadingdropdown

【解决方案1】：

试试

$("#secondary-nav ul ul").slideToggle();

Demo

【讨论】：

【解决方案2】：

我通过进行两项更改使其工作（我认为）：

将第 2 行的选择器更改为：
```
"#secondary-nav ul li"
```
这意味着事件将附加到您单击的列表项，而不是整个列表。
删除第 6 行的 if 语句。由于我们在上一行隐藏了第二级 uls 的 all，因此我们不需要检查它是否可见;我们知道不是。
将第 6 行更改为：
```
$(this).children('ul').slideDown();
```
这是因为您要展开的 ul 是您正在单击的 li 的子对象，而不是兄弟对象。

Here's my fixed jsFiddle.

编辑：如果您想在单击已展开的那个时阻止它隐藏和重新显示，只需将其放在处理程序的顶部即可：

if ($(this).children('ul').is(':visible')){
    return
}

【讨论】：