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