![](https://iknow-base.cdn.bcebos.com/lxb/notice.png)
左侧导航单击H4显示UL里菜单,再次点击则隐藏 ,点其他H4显示该H4下UL,其余隐藏不展示,jquery如何实现
<divclass="nav-treebd"><h4><ahref="javascript:void(0);">导航A<iclass="layui-nav-more"ti...
<div class="nav-treebd">
<h4><a href="javascript:void(0);">导航A<i class="layui-nav-more" title="上下箭头"></i></a></h4>
<ul class="">
<li class=""><a href="javascript:void(0);">业务维护<i class="layui-nav-more" title="右箭头"></i></a></li>
</ul>
<h4><a href="javascript:void(0);">导航B<i class="layui-nav-more" title="上下箭头"></i></a></h4>
<ul class="">
<li class=""><a href="javascript:void(0);">报送检查<i class="layui-nav-more" title="右箭头"></i></a></li>
</ul>
<h4><a href="javascript:void(0);">导航C<i class="layui-nav-more" title="上下箭头"></i></a></h4>
<ul class="">
<li class=""><a href="javascript:void(0);">维护业务<i class="layui-nav-more" title="右箭头"></i></a></li>
</ul>
<h4><a href="javascript:void(0);">导航D<i class="layui-nav-more" title="上下箭头"></i></a></h4>
<ul class="">
<li class=""><a href="javascript:void(0);">检查报送<i class="layui-nav-more" title="右箭头"></i></a></li>
</ul>
</div>
$(".nav-treebd h4").click(function(){
$(this).addClass("XCurr").next().slideDown();
$(".nav-treebd h4").not(this).removeClass("XCurr").next().slideUp();
});
但是实现单击H4显示UL,不能再单击H4隐藏UL; 展开
<h4><a href="javascript:void(0);">导航A<i class="layui-nav-more" title="上下箭头"></i></a></h4>
<ul class="">
<li class=""><a href="javascript:void(0);">业务维护<i class="layui-nav-more" title="右箭头"></i></a></li>
</ul>
<h4><a href="javascript:void(0);">导航B<i class="layui-nav-more" title="上下箭头"></i></a></h4>
<ul class="">
<li class=""><a href="javascript:void(0);">报送检查<i class="layui-nav-more" title="右箭头"></i></a></li>
</ul>
<h4><a href="javascript:void(0);">导航C<i class="layui-nav-more" title="上下箭头"></i></a></h4>
<ul class="">
<li class=""><a href="javascript:void(0);">维护业务<i class="layui-nav-more" title="右箭头"></i></a></li>
</ul>
<h4><a href="javascript:void(0);">导航D<i class="layui-nav-more" title="上下箭头"></i></a></h4>
<ul class="">
<li class=""><a href="javascript:void(0);">检查报送<i class="layui-nav-more" title="右箭头"></i></a></li>
</ul>
</div>
$(".nav-treebd h4").click(function(){
$(this).addClass("XCurr").next().slideDown();
$(".nav-treebd h4").not(this).removeClass("XCurr").next().slideUp();
});
但是实现单击H4显示UL,不能再单击H4隐藏UL; 展开
若以下回答无法解决问题,邀请你更新回答
1个回答
展开全部
$(".nav-treebd h4").click(function(){
if($(this).hasClass('XCurr')){
$(this).removeClass("XCurr").next().slideUp();
}else {
$(this).addClass("XCurr").next().slideDown();
$(".nav-treebd h4").not(this).removeClass("XCurr").next().slideUp();
}
});
if($(this).hasClass('XCurr')){
$(this).removeClass("XCurr").next().slideUp();
}else {
$(this).addClass("XCurr").next().slideDown();
$(".nav-treebd h4").not(this).removeClass("XCurr").next().slideUp();
}
});
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询