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

Showing nav dropdown when menu item is clicked

本文关键字：导航 下拉菜单 显示 菜单项 单击      更新时间：2023-09-26

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

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

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

首先应该是

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

演示:恰好

相关文章：