创建一个下拉菜单功能

Question

我的下拉菜单功能有点问题。 我要拥有的是，第二次单击菜单选项卡后，它的可见性应该被隐藏。

这是我的代码。

HTML： -

<nav class="clearfix">
    <ul>
        <li class="navTab marginRight">
            <a><span class="iconFont">v</span></a>
            <ul>
                <li><a></a></li>
                <li><a></a></li>
            </ul>
        </li>
        <li class="navTab marginRight">
            <a><span class="iconFont">v</span></a>
            <ul>
                <li><a></a></li>
                <li><a></a></li>
            </ul>
        </li>
        <li class="navTab">
            <a><span class="iconFont">v</span></a>
            <ul>
                <li><a></a></li>
                <li><a></a></li>
            </ul>
        </li>
    </ul>
</nav>

CSS： -

.navTab ul.visible {
  visibility: visible;
}

.navTab ul {
  display: inline;
  visibility: hidden;
  padding: 0px;
  z-index: 200;
  position: absolute;
  left: 0;  
}

jQuery的： -

$(document).ready(function(){
  var list = $('.navTab ul'); 

  $('li.navTab').click(function(){
    var thatIndex = $(this).index();
    list.not( ':eq(thatIndex)' ).removeClass('visible');
    list.eq(thatIndex).addClass('visible');
  });
});

Answer 1

toggleClass()方法可能会对您有所帮助。

Answer 2

嗨，我认为您正在寻找这个。

 $(document).ready(function(){ $('li.navTab ul').hide(); $('li.navTab').click(function(){ $(this).find('ul').slideToggle(); }); }); 

 <nav class="clearfix"> <ul> <li class="navTab marginRight"> <a><span class="iconFont">v</span></a> <ul> <li><a>sssss</a></li> <li><a>ads</a></li> </ul> </li> <li class="navTab marginRight"> <a><span class="iconFont">v</span></a> <ul> <li><a>hhhh</a></li> <li><a>weq</a></li> </ul> </li> <li class="navTab"> <a><span class="iconFont">v</span></a> <ul> <li><a>ac</a></li> <li><a>sadfs</a></li> </ul> </li> </ul> </nav> 

但是我还没有应用您的CSS，您可以根据您的自定义样式进行装饰

这是演示工作代码

演示工作代码

---

更新的代码

 $(document).ready(function(){ $('li.navTab ul').hide(); $('li.navTab').click(function(){ debugger; if($('li.navTab').is(":visible")){ $('li.navTab ul').hide(); $(this).find('ul').slideToggle(); } }); }); 

演示运行代码