Jquery - 可点击的下拉菜单

我的下拉菜单出现问题。我有菜单的下拉菜单，但是当我点击一个主导航链接时，它会显示所有列表项目，而不是揭示与父项目ul相关的项目。Jquery - 可点击的下拉菜单

我已经将文件上传到jsfiddle.Could请你帮我出：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-->

来源

2014-03-12 user3345367

您需要修改您的JavaScript这样你就不会触发所有ul ul项目slideToggle，你需要将点击侦听器添加到li - 使用#secondary-nav ul将触发该列表中单击的任何项目的单击事件。

试试这个：

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

请记住，在jQuery选择就像是CSS选择器。当您将点击事件绑定到#secondary-nav ul时，当您单击该列表中的任何位置时，它将被触发，因为所有列表项都是ul的子项。您的原始点击处理程序#secondary-nav ul ul表示“切换列表中的所有列表”，但您更有针对性地希望实现“切换作为单击列表项的子项的列表”。

DEMO

来源

2014-03-12 10:11:21 mikedugan

你应该使用$(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

来源

2014-03-12 10:17:34

Jquery - 可点击的下拉菜单

回答

相关问题