Question

我的下拉菜单出现问题。我有菜单的下拉部分工作，但是当我点击主导航链接时，它会显示所有列表项而不是揭示与父UI相关的项。

我已将文件上传到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，这样您就不会在所有slideToggle项上触发ul ul，并且需要使用#secondary-nav ul将点击监听器添加到li中将触发您在该列表中单击的任何项目的单击事件。

试试这个：

$(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说＆＃34;切换作为列表的子项的所有列表＆＃34;，但您更有针对性地希望实现＆＃34;切换作为所点击列表的子项的列表项＆＃34;

DEMO

Answer 2

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

DEMO

$(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;
}

DEMO :After applying above css

Jquery - 可点击的下拉菜单

2 个答案: