Question

左侧导航单击H4显示UL里菜单，再次点击则隐藏 ，点其他H4显示该H4下UL，其余隐藏不展示，jquery如何实现

<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；

若以下回答无法解决问题，邀请你更新回答

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