我的下拉菜单功能有点问题。我想要的是,第二次单击菜单选项卡后,应该隐藏它的可见性。
这是我的代码......
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');
});
});
答案 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
这是演示工作代码
更新了代码
$(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 强>