我写了一段代码，其中有一个框，当我单击按钮时，它实际上会显示或多或少的信息。在此处查看实际效果:https://jsfiddle.net/075tcezL/
/css
#model {
width: 300px;
border: 1px solid #c1c1c1;
margin: 20px 10px;
padding: 0 5px;
float: left;
max-height: 300px;
overflow: hidden;
-webkit-transition: max-height 0.7s;
-moz-transition: max-height 0.7s;
transition: max-heigth 0.7s;
}
#show-more {
display: block;
background-color: #75868E;
width: 100px;
font-size: 12px;
text-transform: uppercase;
display: inline-block;
margin: 20px auto;
cursor: pointer;
height: 15px;
padding: 10px 0;
}
#model.open {
max-height: 1000px;
-webkit-transition: max-heigth 0.7s;
-moz-transition: max-heigth 0.7s;
transition: max-heigth 0.7s;
}
//HTML
<body>
<div id="model" class="model1">
<h3>Series 3</h3>
<a href="#series3" id="sseries"><img class="image"
src="image"></a>
<p>Text to hide or show.</p>
</div>
<a id="show-more" class="show">Show More</a>
<script src="javascript.js"></script>
</body>
//这适用于一个盒子
var content = document.getElementById("model");
var button = document.getElementById("show-more")
button.onclick = function(){
if(content.className == "open"){
content.className = "";
button.innerHTML = "More";
} else {
content.className = "open";
button.innerHTML = "Less";
}
};
但是如果我有三个盒子，像这样 - https://jsfiddle.net/jw7pfb1w/ 单击该按钮时如何同时打开或关闭它们？
如有任何帮助，我们将不胜感激!
最佳答案
您可以使用 document.getElementsByClassName('.model1'); 选择页面上具有相同类的所有元素:
var content = document.getElementsByClassName("model1");
var button = document.getElementById("show-more");
button.onclick = function(){
for (i = 0; i < content.length; ++i) {
if(content[i].className == "model1 open"){
content[i].className = "model1";
button.innerHTML = "More";
} else {
content[i].className = "model1 open";
button.innerHTML = "Less";
}
}
};
在 3 面板示例中，您还需要 open 的 CSS:
div.open {
max-height: 1000px;
-webkit-transition: max-heigth 0.7s;
-moz-transition: max-heigth 0.7s;
transition: max-heigth 0.7s;
}
为您添加了一个工作 fiddle :https://jsfiddle.net/jw7pfb1w/5/
关于javascript - 单击按钮 html、css、javascript 时显示更多信息，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44639497/