我使用来自 W3 School 的代码对于我的可折叠部分，它运行良好，现在如果第一部分“打开第 1 部分内容”被隐藏(不显示)，我想向下滑动“打开第 1 部分按钮”(margin-top:10px)。我知道并理解这是一个非常简单的任务，但对 JS 来说是一个新任务，我很难弄清楚如何仅在满足某些条件的情况下才应用 css(如果显示 block ，则将其恢复为 margin-top:0 ).
正如我所说，我尝试了不同的方法，但它们与原始的 W3 JS 代码混为一谈，如果我应用其他东西并在上面提到显示，它就会停止工作。
我只需要定位一个元素如果其中只有一个改变了他的状态(显示 block - 无；无 - block )。
如果可能的话，我想在元素上下移动时添加一些动画
此外，如果所有 可折叠部分等于不显示，脚本将激活另一个带有图像的隐藏 div(之前未提及)，如果任何则将其隐藏此部分的内容等于显示 block 。
任何帮助将不胜感激
(我有三个可折叠的，每个都有三个按钮，就像 W3 示例一样简单)
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}.collapsible {
background-color: #777;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.active, .collapsible:hover {
background-color: #555;
}
.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #f1f1f1;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p>Collapsible Set:</p>
<button class="collapsible">Open Section 1</button>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="collapsible">Open Section 2</button>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="collapsible">Open Section 3</button>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>最佳答案
您可以创建一个函数，如果它的 nextElementSibling 的显示不阻塞，则将第一部分的 margin-top 设置为 10px，并在页面加载和显示时执行该函数内容。为了使元素平滑地动画 margin-top，您可以将 transition: margin 0.5s 添加到 .collapsible。
.collapsible {
background-color: #777;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: margin 0.5s;
}
.active, .collapsible:hover {
background-color: #555;
}
.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #f1f1f1;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p>Collapsible Set:</p>
<button class="collapsible">Open Section 1</button>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="collapsible">Open Section 2</button>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="collapsible">Open Section 3</button>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
moveSection();
});
}
function moveSection(){
var section1 = coll[0];
if(section1.nextElementSibling.style.display!="block"){
section1.style.marginTop = "10px";
} else {
section1.style.marginTop = "";
}
}
moveSection();
</script>
</body>
</html>关于javascript - 如果显示等于具有平滑动画 JQuery 的 block ，则样式特定元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51825198/