creating a drop down menu function

Question

i have a little problem with my drop menu function. what i want to have is that after clicking a menu tab for the second time it visibility should be hidden.

here is my code....

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

hi i think you are looking for this.?

 $(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> 

yet i haven't apply your css you can decorate as per your customized styles

here is the demo working code

Demo working code

---

Updated code

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

Demo running code