我有一个由多个可以折叠的 div 组成的 div,然后在它们下面是另一个 div。
目前,如下面的 fiddle 所示,底部 div 仅在单击框 3 或框 1(左列)时向下滚动。
我希望右栏(方框 2 和 4)像左栏一样向下滚动,但到目前为止我失败了。
感谢您提前提供的帮助。
var drop = document.getElementsByClassName("drop");
var i;
for (i = 0; i < drop.length; i++) {
drop[i].addEventListener("click", function() {
this.classList.toggle("active");
var collapse = this.previousElementSibling;
if (collapse.style.maxHeight) {
collapse.style.maxHeight = null;
} else {
collapse.style.maxHeight = collapse.scrollHeight + "px";
}
});
}
#panel {
background-color: white;
float: center;
position: relative;
width: 800px;
/* height: 500px; */
margin: 0 auto;
border-color: #B7B7B7;
border-width: 2px;
border-radius: 25px;
}
#box1 {
border: 2px solid #B7B7B7;
position: relative;
display: inline-block;
width: 250px;
top: 0;
left: 0;
border-radius: 5px;
transition: max-height 0.2s ease-out;
}
#box2 {
border: 2px solid #B7B7B7;
position: relative;
display: inline-block;
width: 525px;
top: 0;
float: right;
border-radius: 5px;
transition: max-height 0.2s ease-out;
}
#box3 {
border: 2px solid #B7B7B7;
display: inline-block;
top: 0;
left: 0;
width: 250px;
position: relative;
border-radius: 5px;
transition: max-height 0.2s ease-out;
}
#box4 {
border: 2px solid #B7B7B7;
display: inline-block;
position: relative;
top: 0;
float: right;
width: 525px;
border-radius: 5px;
transition: max-height 0.2s ease-out;
}
#travel {
margin: auto;
background-color: black;
border-style: solid;
border-color: #B7B7B7;
border-width: 2px;
border-radius: 5px;
position: relative;
margin-top: 15px;
width: 800px;
height: 300px;
}
.drop {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
border-radius: 5px;
bottom: 0;
}
.active, .drop:hover {
background-color: #ccc;
}
.collapse {
padding: 0 18px;
background-color: gray;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
<div id=panel>
<div id="box1">
<br>this is box 1<br>
<div class="collapse">
<p>a drop</p>
</div>
<button class="drop">view more</button>
</div>
<div id="box2" style="margin-bottom: 15px;">
<br>this is box 2<br>
<div class="collapse">
<p>a drop</p>
</div>
<button class="drop">view more</button>
</div>
<div id="box4">
<br>this is box 4<br>
<div class="collapse">
<p>a drop</p>
</div>
<button class="drop">view more</button>
</div>
<div id="box3" style="margin-top: 15px;">
<br>this is box 3<br>
<div class="collapse">
<p>a drop</p>
</div>
<button class="drop">view more</button>
</div>
<div id="travel">
</div>
</div>
最佳答案
当您使 box2 和 box4 float 在右侧时,您将需要在所有盒子后面添加一个清除元素来清除 float 对象的效果。我已添加<div style="clear:both"></div>
后框:
var drop = document.getElementsByClassName("drop");
var i;
for (i = 0; i < drop.length; i++) {
drop[i].addEventListener("click", function() {
this.classList.toggle("active");
var collapse = this.previousElementSibling;
if (collapse.style.maxHeight) {
collapse.style.maxHeight = null;
} else {
collapse.style.maxHeight = collapse.scrollHeight + "px";
}
});
}
#panel {
background-color: white;
float: center;
position: relative;
width: 800px;
/* height: 500px; */
margin: 0 auto;
border-color: #B7B7B7;
border-width: 2px;
border-radius: 25px;
}
#box1 {
border: 2px solid #B7B7B7;
position: relative;
display: inline-block;
width: 250px;
top: 0;
left: 0;
border-radius: 5px;
transition: max-height 0.2s ease-out;
}
#box2 {
border: 2px solid #B7B7B7;
position: relative;
display: inline-block;
width: 525px;
top: 0;
float: right;
border-radius: 5px;
transition: max-height 0.2s ease-out;
}
#box3 {
border: 2px solid #B7B7B7;
display: inline-block;
top: 0;
left: 0;
width: 250px;
position: relative;
border-radius: 5px;
transition: max-height 0.2s ease-out;
}
#box4 {
border: 2px solid #B7B7B7;
display: inline-block;
position: relative;
top: 0;
float: right;
width: 525px;
border-radius: 5px;
transition: max-height 0.2s ease-out;
}
#travel {
margin: auto;
background-color: black;
border-style: solid;
border-color: #B7B7B7;
border-width: 2px;
border-radius: 5px;
position: relative;
margin-top: 15px;
width: 800px;
height: 300px;
}
.drop {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
border-radius: 5px;
bottom: 0;
}
.active, .drop:hover {
background-color: #ccc;
}
.collapse {
padding: 0 18px;
background-color: gray;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
<div id=panel>
<div id="box1">
<br>this is box 1<br>
<div class="collapse">
<p>a drop</p>
</div>
<button class="drop">view more</button>
</div>
<div id="box2" style="margin-bottom: 15px;">
<br>this is box 2<br>
<div class="collapse">
<p>a drop</p>
</div>
<button class="drop">view more</button>
</div>
<div id="box4">
<br>this is box 4<br>
<div class="collapse">
<p>a drop</p>
</div>
<button class="drop">view more</button>
</div>
<div id="box3" style="margin-top: 15px;">
<br>this is box 3<br>
<div class="collapse">
<p>a drop</p>
</div>
<button class="drop">view more</button>
</div>
<div style="clear:both"></div>
<div id="travel">
</div>
</div>
关于javascript - div 相对于另外两个 div 的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55572640/