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 - 可點擊的下拉菜單

回答

相關問題