創建一個下拉菜單功能

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

演示運行代碼