单击菜单项时显示导航下拉菜单答案

【问题标题】：Showing nav dropdown when menu item is clicked单击菜单项时显示导航下拉菜单
【发布时间】：2013-04-20 06:45:21
【问题描述】：

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

【问题讨论】：

使用 Javascript 小提琴。

标签： javascript jquery twitter-bootstrap navigation

【解决方案1】：

$('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(); 将阻止重定向，因为我认为当您只想显示下拉菜单时您不会想要这样做。

【讨论】：

你是对的，忘记在其中添加 preventDefault 因为我稍后会这样做。在$(this).addClass("className"); 中，它将类名添加到a 而不是ul。想法？
@Ahhhhhhhhhhhhhdfgbv 哦，我以为您想在“单击的项目”上添加类。无论如何，我会更新我的答案:)
如果它只是针对ul 我可以这样做:]
@Ahhhhhhhhhhhhhdfgbv 等等，你想在哪里添加类？到用户点击的a或ul.drop_down?
明亮，干净。我将您的两个作品都添加到了其中：jsfiddle.net/VzMgz/2

【解决方案2】：

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

【讨论】：

【解决方案3】：

首先应该是

$(function(){

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

});

演示：Plunker

【讨论】：