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

Divs not lining up in Bootstrap/Javascript checkbox menu

本文关键字：复选框 菜单 排队 Javascript Bootstrap 潜水      更新时间：2023-09-26

我制作了这个复选框菜单。我希望在选中每个框时，所有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;
}

提前感谢您的帮助！一周来，我一直在论坛上绞尽脑汁，试图解决这个简单的问题。

要以一种解释性很好的方式回答，可能会破坏这一评论，因此我只为您的问题提供一个有效的解决方案。所以只需添加以下几行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();
});
相关文章：