單擊菜單項時顯示導航下拉菜單

我喜歡Twitter引導程序，但不需要所有功能。在它雖然是一個下拉功能，我試圖複製。單擊菜單項時顯示導航下拉菜單

這是我的HTML：

<nav class="navigation" role="navigation"> 
    <ul class="a"> 
     <li><a class="" href="">Page 1</a></li> 
     <li><a class="" href="">Page 2</a></li> 

     <li> 
      <a class="" href="">Page 3</a> 
      <ul class="drop_down"> 
       <li><a href="#">List 1</a></li> 
       <li><a href="#">List 2</a></li> 
       <li class="nav_divider"></li> 
       <li><a href="#">List 3</a></li> 
       <li><a href="#">List 4</a></li> 
       <li><a href="#">List 5</a></li> 
      </ul> 
     </li> 

     <li><a class="" href="">Page 4</a></li> 
     <li><a class="" href="">Page 5</a></li> 
    </ul> 
</nav>

我的JavaScript到目前爲止（它不是太大）：

$('nav.navigation li a').on('click', function() { 
    if($('nav.navigation li').has('ul.drop_down')) { 
     // Don't know how to add class to the clicked item, 
     // and not all 'a' in the nav. 
    } 
});

來源

2013-04-20 Ahhhhhhhhhhhhhdfgbv

使用Javascript小提琴。 – 2013-04-20 06:47:47

$('nav.navigation li a').on('click', function(e) { 
    if($(this).parent().has('ul.drop_down')) { 
     $(this).siblings('ul.drop_down').addClass("className"); 
     e.preventDefault(); 
    } 
});

調用e.preventDefault();將阻止重定向，因爲我不認爲當您只想顯示下拉菜單時，您不希望這樣做。

來源

2013-04-20 07:00:29

你是對的，忘記將preventDefault添加進去，因爲以後我會這樣做。在$（this）.addClass（「className」）中;'它將className添加到'a'而不是'ul'。思考？ – Ahhhhhhhhhhhhhdfgbv 2013-04-20 07:06:39

http://jsfiddle.net/VzMgz/1/ – Ahhhhhhhhhhhhhdfgbv 2013-04-20 07:08:18

@Ahhhhhhhhhhhhhdfgbv哦，我以爲你想添加'點擊項目'類。無論如何，我會更新我的答案:) – 2013-04-20 07:08:56

$('nav.navigation li a').on('click', function(event) { 
    if($('nav.navigation li').has('ul.drop_down')) { 
     // Don't know how to add class to the clicked item, 
      alert(event.target.id); //here do stuff with that id 
    } 
});

來源

2013-04-20 06:48:20

首先，它應該是

$(function(){ 

    $('nav.navigation li a').on('click', function() { 
    var $this = $(this); 
    if($this.parent('li').children('ul.drop_down').length) { 
     $this.addClass('someclass'); 
    } 
    }); 

});

演示：Plunker

來源

2013-04-20 06:49:28

單擊菜單項時顯示導航下拉菜單

回答

相關問題