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

Question

我喜歡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.
    }
});

Answer 1

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

Answer 2

首先應該是

$(function(){

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

});

演示： 柱塞

Answer 3

$('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(); 會阻止重定向，因為我不希望僅在顯示下拉菜單時會想要重定向。