jQuery-可点击的下拉菜单

Question

我的下拉菜单有问题。 我的菜单的下拉部分起作用，但是当我单击主导航链接时，它将显示所有列表项，而不是显示与父ul相关的列表项。

我已将文件上传到jsfiddle。麻烦您帮我一下： http : //jsfiddle.net/7rwhP/1/

        <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><a href="#.html">Past Articles</a>
                    <ul>
                         <li><a href="pages.html">Example 1</a></li>
                       <li><a href="#.html">Example 2</a></li>
                       <li><a href="#.html">Example 3</a></li>
                  </ul>
                </li>
                <li><a href="#.html">Tradition</a>
                    <ul>
                         <li><a href="pages.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-->

Answer 1

您需要修改JavaScript，以便不会在所有ul ul项目上触发slideToggle ，并且需要将点击侦听器添加到li中-使用#secondary-nav ul将触发您在其中单击的任何项目的click事件。清单。

尝试这个：

$(document).ready(function(){
    $("#secondary-nav li").click(function(){
        //slide up all the link lists
        $(this).children('ul').slideToggle();
    })
})

记住，jQuery中的选择器就像CSS选择器一样。 当您将click事件绑定到#secondary-nav ul时，单击该列表中的任意位置都会触发该事件，因为所有列表项的确是ul的子级。 您最初的点击处理程序#secondary-nav ul ul说“切换列表中的所有子列表”，但是您更明确地希望实现“切换列表中的子列表”。

演示

Answer 2

您应该使用$(this).children()

演示

$(document).ready(function(){
    $("#secondary-nav li").click(function(){
        //slide up all the link lists
        $(this).children('ul').slideToggle();
    })
});

您也应该添加此CSS

#secondary-nav ul li {
white-space:nowrap;
}

演示：申请以上css之后