更新：显示所有子元素的进展更多 - https://jsfiddle.net/zigzag/jstuq9ok/11/现在只需要解决此问题，也可以显示亚秒区域。如果你现在点击Lily，shen和另一个shen出现，但如果你现在点击shen向下钻取，它只是隐藏它。想法？
我想清楚，在这种情况下，数据来自源系统，因此我们不希望/喜欢硬编码。也就是说，这是我们想要的结构......
2.1 Sen
2.1.1坦克
2.2另一位参议员
感谢在线贡献社区，我做到了这一点。进度：https://jsfiddle.net/zigzag/jstuq9ok/10/
你会注意到当你点击Lily时，你只会看到Sen而不是Another Sen.我尝试在2.1.1之前放置标记，反之亦然但是没有效果。我确定我在jQuery DOM遍历中遗漏了一些东西。
$('.menu-toggle').click(function(e) {
e.preventDefault(); // prevent <a> to redirect to the top of the page
$('.row:not(.sub):not(.subsecond)').not($('.sub').prev('.row')).not($('.subsecond').prev('.row')).not($(this).closest('.row')).find('span.glyphicon-menu-up').toggleClass('glyphicon-menu-down glyphicon-menu-up');
$(this).find('span').toggleClass('glyphicon-menu-down glyphicon-menu-up');
var Nextrow = $(this).closest('.row').next('.row'); // get the next row
if (Nextrow.hasClass('sub')) { // if next row has class sub
$('.sub').not(Nextrow).hide(); // hide all sub but not this one
Nextrow.slideToggle(function() {
if ($(this).is(':hidden')) {
$('.subsecond').hide();
$('span.glyphicon-menu-up').toggleClass('glyphicon-menu-down glyphicon-menu-up');
}
}); // toggle this sub row
return false;
}
if (Nextrow.hasClass('subsecond')) { // if next row has class subsecond
$('.subsecond').not(Nextrow).hide(); // hide all subsecond but not this one
Nextrow.slideToggle(); // toggle this subsecond row
return false;
}
});.pageArea {
background-color: black;
}
.orgChart {
margin: 10px;
padding: 10px;
background-color: gray;
font-family: segoe UI;
color: white;
}
.img_title {
vertical-align: middle;
}
.empDetails {
font-size: 14px;
color: white;
}
a:link,
a:visited,
a:hover,
a:focus,
a:active {
color: white;
}
.toggle_class {
text-align: right;
}
.sub {
display: none;
margin-left: 20px;
}
.subsecond {
display: none;
margin-left: 30px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container pageArea">
<div class="row orgChart">
<div class="col-sm-2 img_tile">
<img src="http://via.placeholder.com/100x100">
</div>
<div class="col-sm-8 empDetails">
<h4>
Adam
</h4>
<p>
Director
</p>
<p>
Ensure quality and timely delivery through resource and time management.
</p>
</div>
</div>
<div class="row orgChart">
<div class="col-sm-2 img_tile">
<img src="http://via.placeholder.com/100x100">
</div>
<div class="col-sm-8 empDetails">
<h4>
Lily
</h4>
<p>
Project Manager
</p>
<p>
Ensure quality and timely delivery through resource and time management.
</p>
</div>
<div class="col-sm-2 toggle_button">
<a class="menu-toggle" href="#">
<span class="glyphicon glyphicon-menu-down"></span>
</a>
</div>
</div>
<div class="row orgChart sub">
<div class="col-sm-2 img_tile">
<img src="http://via.placeholder.com/100x100">
</div>
<div class="col-sm-8 empDetails">
<h4>
Sen
</h4>
<p>
Team Lead
</p>
<p>
Ensure quality and timely delivery through resource and time management.
</p>
</div>
<div class="col-sm-2 toggle_button">
<a class="menu-toggle" href="#">
<span class="glyphicon glyphicon-menu-down"></span>
</a>
</div>
</div>
<div class="row orgChart sub">
<div class="col-sm-2 img_tile">
<img src="http://via.placeholder.com/100x100">
</div>
<div class="col-sm-8 empDetails">
<h4>
Other Sen
</h4>
<p>
Team Lead
</p>
<p>
Ensure quality and timely delivery through resource and time management.
</p>
</div>
</div>
<div class="row orgChart subsecond">
<div class="col-sm-2 img_tile">
<img src="http://via.placeholder.com/100x100">
</div>
<div class="col-sm-8 empDetails">
<h4>
Tank
</h4>
<p>
Designer
</p>
<p>
Ensure quality and timely delivery through resource and time management.
</p>
</div>
<div class="col-sm-2 toggle_button">
<a class="menu-toggle" href="#">
<span class="glyphicon glyphicon-menu-down"></span>
</a>
</div>
</div>
<div class="row orgChart">
<div class="col-sm-2 img_tile">
<img src="http://via.placeholder.com/100x100">
</div>
<div class="col-sm-8 empDetails">
<h4>
Justin
</h4>
<p>
Director
</p>
<p>
Ensure quality and timely delivery through resource and time management.
</p>
</div>
<div class="col-sm-2 toggle_button">
<a class="menu-toggle" href="#">
<span class="glyphicon glyphicon-menu-down"></span>
</a>
</div>
</div>
</div>
答案 0 :(得分：0)
你只是在改变＆＃34;接下来＆＃34;行。 （$（this）.closest（＆＃39; .row＆＃39;）。next（＆＃39; .row＆＃39;）;）我想你不想瞄准下一个和所有兄弟姐妹的行。
如果您将嵌套的div分组应该一起打开的行，那么Temani pointet在他的评论中会更容易。
$('span').click(function(){
$('.sublevel').addClass('toClose');/*close all*/
$(this).next('.sublevel').removeClass('toClose');/*but not the one after this toggler*/
$(this).next('.sublevel').parents('.sublevel').removeClass('toClose');/*and also keep open it's ancestors*/
$('.sublevel.toClose').hide();/*hide ones to close*/
$('.sublevel:not(.toClose)').show();/*show the others*/
$('.sublevel.toClose').removeClass('toClose');/*tidy up*/
}
);div{padding-left:2rem;}
.sublevel{display:none;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
1 Adam
</div>
<div>
2 Lily<span>[toggler]</span>
<div class="sublevel">
<div>
2.1 Sen<span>[toggler]</span>
<div class="sublevel">
2.1.1 Tank
</div>
</div>
<div>
2.2 Another Sen
</div>
</div>
</div>
<div>
3 Justin<span>[toggler]</span>
<div class="sublevel">
<div>
3.1 someone
</div>
<div>
3.2 someother<span>[toggler]</span>
<div class="sublevel">
3.1.1 this one
</div>
</div>
<div>
3.3 someother 2
</div>
<div>
3.4 someother 3
</div>
</div>
</div>