个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我有一个 slider ，当它以一种方式滑动时我想要它，它会隐藏页面上带有类名="siteContainer"的所有元素。当我再次单击它时，我希望它显示所有带有 classname="siteContainer"
的元素因为有很多元素我需要一个循环(我有)。我已设法使所有元素可见，但无法再次使可见。
元素不连续，因此不能用一个 ID 组合到一个 div 中。
在codepen中https://codepen.io/payling/pen/MRmvwY
及以下
<script>
function setDisplay(className, displayValue) {
var items = document.getElementsByClassName(className);
for (var i=0; i < items.length; i++) {
items[i].style.display = displayValue;
}
}
function showsiteContainer() {
setDisplay("siteContainer", "none");
}
</script>
function showsiteContainer() {
var x = document.getElementById("block");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<style>
.siteContainer {
display:flex;
width:40px;
hieght:40px;
color:black;
text-decoration:none;
font-size:13px;
padding:5px;
border-top-color: rgb(133, 130, 130);
border-top-style:dotted;
border-width: 1px;
}
/* SLIDE BUTTON*/
.switch {
position: relative;
display: inline-block;
width: 40px;
height: 20px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #EDEDED;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 12px;
width: 12px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #1C77C3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(18px);
-ms-transform: translateX(18px);
transform: translateX(18px);
}
/* Rounded sliders */
.slider.round {
border-radius: 24px;
}
.slider.round:before {
border-radius: 50%;
}
</style>
<body>
<div>
<span>DETAILS</span>
<label class="switch">
<input type="checkbox" onclick="showsiteContainer()" >
<span class="slider round"></span>
</label>
</div>
<div>
<div class="siteContainer">an element</div>
<div class="siteContainer">2nd element</div>
</div>
<div class="siteContainer">3rd element</div>
<div class="siteContainer">4th element</div>
</div>
</body>
最佳答案
稍微修改一下你的例子，我重写了你的函数:
function showsiteContainer() {
var elements = document.getElementsByClassName("siteContainer");
Array.prototype.forEach.call(elements, function(el) {
if (el.style.display === "none") {
el.style.display = "block";
} else {
el.style.display = "none";
}
});
}
关于css - 切换共享相同类名的多个元素的可见性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55629350/
26
4
0
所以我有这个 UltraTicTacToe 游戏，我正在用 HTML/CSS/JS 编码。它由表中表中的表组成。当您单击 X 或 O 时，我想要突出显示您应该进入的下一个 TicTacToe 牌 ta
Some text Some more text 如何让每个 .example 的 .whatever 包含其 .test 的内容？ 例如，如果代码是这样的: Som
我是一名优秀的程序员,十分优秀！