javascript - 单击菜单项时显示导航下拉菜单

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

});

演示：Plunker

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();将阻止重定向，因为当您只想显示下拉列表时，我认为您不希望这样做。