创建下拉菜单功能

时间:2015-08-28 11:54:24

标签: javascript jquery html css

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

这是我的代码......

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

2 个答案:

答案 0 :(得分:0)

toggleClass()方法可以帮助您。

答案 1 :(得分:0)

嗨,我想你正在寻找这个。?

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

这是演示工作代码

Demo working 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