我的网站上有一些可折叠的div,例如:http://dogs.bluskye.net/seeya/(照片中不是我;)),使用下面的JavaScript / CSS和简化的html示例。
我已经搜索了一种创建“全部折叠/全部显示”按钮的方法,但是由于我真的不了解JavaScript,因此在使用我在我的示例中遇到的麻烦。
我花了很多时间修改我正在使用的当前JavaScript / CSS,所以我真的不想在其他系统上使用它-有人可以帮我创建一个按钮,当单击该按钮时可以在隐藏/显示所有基于我已经在使用的.inside div类?
谢谢!
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 || content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
.collapsible {
background-color: #007784;
color: #FFFFFF;
cursor: pointer;
width: 97%;
border: 2px solid #000000;
border-bottom: 0px;
border-radius: 15px 15px 0px 0px;
text-align: center;
outline: none;
font-size: 18px;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin-top: 3px;
padding: 0px;
}
button.collapsible.active {
border: 2px solid #000000;
border-radius: 15px;
}
.collapsible:hover {
background-color: #0066FF;
border-bottom: 0px;
border-radius: 15px 15px 0px 0px;
margin-top: 3px;
}
.active {
background-color: #007784;
border-bottom: 0px;
border-radius: 15px 15px 0px 0px;
margin-top: 3px;
}
.inside {
padding: 0;
width: 97%;
display: block;
overflow: hidden;
border-top: 0px;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
background-color: #FFFFFF;
border-radius: 0px 0px 15px 15px;
}
/*unrelated*/
.trials {width:100%;}
<button type="button" class="collapsible">Standard Novice</button>
<div class="inside">
<table class="trials" cellspacing="1" cellpadding="2px">
<tr>
<td width="33%">GSDCO</td>
<td width="33%">BTCWWA</td>
<td width="33%">PAC</td>
</tr>
<tr>
<td width="33%">January 1, 2020</td>
<td width="33%">January 1, 2020</td>
<td width="33%">January 1, 2020</td>
</tr>
</table>
</div>
<button type="button" class="collapsible">Jumpers Novice</button>
<div class="inside">
<table class="trials" cellspacing="1" cellpadding="2px">
<tr>
<td width="33%">PNWSSC</td>
<td width="33%">MHDPC</td>
<td width="33%">GSDCO</td>
</tr>
<tr>
<td width="33%">March 1, 2020</td>
<td width="33%">March 2, 2020</td>
<td width="33%">March 3, 2020</td>
</tr>
</table>
</div>
这里是解决方案,尽管我使用过jQuery,但是您可以使用javascript实现相同的功能,逻辑将保持不变,如果您需要我仅将其转换为JS,请告诉我。
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 || content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
var colAll = document.getElementById("colapseAll");
var insideDiv = document.getElementsByClassName("inside");
colAll.addEventListener("click", function() {
$(insideDiv).hide();
$('.collapsible').addClass('active');
});
.collapsible {
background-color: #007784;
color: #FFFFFF;
cursor: pointer;
width: 97%;
border: 2px solid #000000;
border-bottom: 0px;
border-radius: 15px 15px 0px 0px;
text-align: center;
outline: none;
font-size: 18px;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin-top: 3px;
padding: 0px;
}
button.collapsible.active {
border: 2px solid #000000;
border-radius: 15px;
}
.collapsible:hover {
background-color: #0066FF;
border-bottom: 0px;
border-radius: 15px 15px 0px 0px;
margin-top: 3px;
}
.active {
background-color: #007784;
border-bottom: 0px;
border-radius: 15px 15px 0px 0px;
margin-top: 3px;
}
.inside {
padding: 0;
width: 97%;
display: block;
overflow: hidden;
border-top: 0px;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
background-color: #FFFFFF;
border-radius: 0px 0px 15px 15px;
}
/*unrelated*/
.trials {width:100%;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="colapseAll">collapse all</button>
<button type="button" class="collapsible">Standard Novice</button>
<div class="inside">
<table class="trials" cellspacing="1" cellpadding="2px">
<tr>
<td width="33%">GSDCO</td>
<td width="33%">BTCWWA</td>
<td width="33%">PAC</td>
</tr>
<tr>
<td width="33%">January 1, 2020</td>
<td width="33%">January 1, 2020</td>
<td width="33%">January 1, 2020</td>
</tr>
</table>
</div>
<button type="button" class="collapsible">Jumpers Novice</button>
<div class="inside">
<table class="trials" cellspacing="1" cellpadding="2px">
<tr>
<td width="33%">PNWSSC</td>
<td width="33%">MHDPC</td>
<td width="33%">GSDCO</td>
</tr>
<tr>
<td width="33%">March 1, 2020</td>
<td width="33%">March 2, 2020</td>
<td width="33%">March 3, 2020</td>
</tr>
</table>
</div>
这是您使用纯Javascript的解决方案。您只需要用[>]包装脚本
document.addEventListener("DOMContentLoaded", function(){ ... });
以确保内容在脚本之前已加载
document.addEventListener("DOMContentLoaded", function(){ 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 || content.style.display === "block") { content.style.display = "none"; } else { content.style.display = "block"; } }); } });
用脚本替换它,您就很好了
这是您要做什么?我可以修改任何内容,所以请解释一下这是否不能满足您的要求,我可以在投票否决之前对其进行编辑。谢谢!