Divs没有在Bootstrap/Javascript复选框菜单中排队

Question

我做了这个复选框菜单。当每个盒子被选中时，我希望所有的div都排列在彼此之下，其中一些使用Bootstrap很好地完成。但是，当您查看“研究方法”时，两个div将彼此分开，并且不会在顶部/旁边排列。我想知道为什么这是？这里有一个现场演示：

http://dev.wwnorton.com/sandbox/showcase2015/test/OEBPS5/1-ChooseANorton.html

下面是代码：

Javascript: 

$('#chkIntroPsych').click(function(){ 
    this.checked?$('#dvIntroPsych').show():$('#dvIntroPsych').hide(); 
}); 

$('#chkIntroPsych').click(function(){ 
    this.checked?$('#dvIntroPsych1').show():$('#dvIntroPsych1').hide(); 
}); 

$('#chkIntroPsych').click(function(){ 
    this.checked?$('#dvIntroPsych2').show():$('#dvIntroPsych2').hide(); 
}); 

$('#chkResearch').click(function(){ 
    this.checked?$('#dvResearch').show():$('#dvResearch').hide(); 
}); 

$('#chkResearch').click(function(){ 
    this.checked?$('#dvResearch2').show():$('#dvResearch2').hide(); 
}); 

$('#chkSocPsych').click(function(){ 
    this.checked?$('#dvSocPsych').show():$('#dvSocPsych').hide(); 
}); 

$('#chkSocPsych').click(function(){ 
    this.checked?$('#dvSocPsych2').show():$('#dvSocPsych2').hide(); 
}); 

$('#chkSocPsych').click(function(){ 
    this.checked?$('#dvSocPsych3').show():$('#dvSocPsych3').hide(); 
}); 

$('#chkCogPsych').click(function(){ 
    this.checked?$('#dvCogPsych').show():$('#dvCogPsych').hide(); 
}); 

$('#chkCogPsych').click(function(){ 
    this.checked?$('#dvCogPsych2').show():$('#dvCogPsych2').hide(); 
}); 

$('#chkPersonPsych').click(function(){ 
    this.checked?$('#dvPersonPsych').show():$('#dvPersonPsych').hide(); 
}); 

$('#chkPersonPsych').click(function(){ 
    this.checked?$('#dvPersonPsych2').show():$('#dvPersonPsych2').hide(); 
}); 

$('#chkDevPsych').click(function(){ 
    this.checked?$('#dvDevPsych').show():$('#dvDevPsych').hide(); 
}); 

$('#chkHistory').click(function(){ 
    this.checked?$('#dvHistory').show():$('#dvHistory').hide(); 
}); 

}); 

And CSS: 

.spacer { 
height: 10px; 
width: 100%; 
clear: both; 
} 

.bookcontainer { 
width: 100%; 
float: left; 
display: block; 
min-height: 260px; 
margin: 5px; 
padding: 20px; 
-moz-box-shadow: 0 0 5px #acacac; 
-webkit-box-shadow: 0 0 5px #acacac; 
box-shadow: 0px 0px 5px #acacac; 
border-radius:5px; 
vertical-align: top; 
background-color: #ffffff; 
} 

.bookcontainer .book img { 
border: 1px solid #bbbbbb; 
width: 20%; 
height: 20%; 
float: left; 
margin-right: 15px; 
vertical-align: top; 
padding: 0; 
position: relative; 
top: 5px; 
overflow: hidden; 
} 

.maintoc { 
width:100%; 
clear: both; 
margin-top: 30px; 
margin-bottom: 30px; 
} 

.maintoc a { 
text-decoration: none; 
} 

label { 
text-align:center; 
line-height:18px; 
font-family:Lato; 
font-weight:bold; 
color:#0092c8; 
font-size:15px; 
} 

input[type="checkbox"]{ 
cursor: pointer; 
-webkit-appearance: none; 
appearance: none; 
background: white; 
box-sizing: border-box; 
position: relative; 
box-sizing: content-box ; 
width: 25px; 
height: 25px; 
border-width: 0; 
position: relative; 
margin-right: 5px; 
margin-bottom: -5px; 
} 

input[type="checkbox"]:checked{ 
    background-color: #0092c8; 
} 

input[type="checkbox"]:focus{ 
    outline: 0 none; 
    box-shadow: none; 
} 

.ckbatch { 
float: left; 
display: inline-block; 
height: 100%; 
margin: 10px; 
} 

.ckbatchcontainer { 
float: left; 
display: inline-block; 
height: 100%; 
margin-bottom: 5px; 
padding: 0; 
} 

.TOCtext { 
text-align:center; 
line-height:18px; 
font-family:Lato; 
font-weight:bold; 
color:#948973; 
font-size:15px; 
} 

.TOCtext a { 
margin: 0; 
padding: 0; 
} 

.TOCimage { 
height: 150px; 
margin: 0 auto; 
position: relative; 
display: block; 
padding-bottom: 10px; 
} 

预先感谢您的任何和所有帮助！我一直在困扰我的大脑一周，并在论坛上尝试解决这个简单的问题。

Answer 1

要以一个很好解释的方式回答可能会爆这个评论，因此我只会提供一个工作解决方案为您的问题。因此，只需添加以下这些Javascript代码：

$('.ckbatchcontainer [type=checkbox]').click(function(){ 
    var id=$(this).attr('id').replace(/chk/, '[id^=dv') + ']'; 
    var target = $(id).parent(); 
    target.siblings(':not([style])').hide(); 
    this.checked ? target.show() : target.hide(); 
});