切换显示所有类[副本]
当一个按钮被点击，我想改变显示的所有类显示：隐藏；并将其反转
CSS：
<style>
div.inactive {
display: block;
}
</style>
HTML：
<button onclick="hideInactive()">Show/hide</button>
<div class="inactive">DIV 1: inactive</div>
<p class="inactive">DIV 2: inactive</p>
<ul>
<li class="inactive">
List item 1: Inactive
</li>
<li>
List item 2: Active
</li>
</ul>
JS：
<script>
function hideInactive() {
var x = document.getElementsByClassName('.inactive');
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
我尝试用这种方式选择所有的类：
var x = document.querySelectorAll(".inactive");
我试着遍历每一个类：
function hideInactive() {
var x = document.querySelectorAll(".inactive");
for (var i = 0; i < x.length; i++) {
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
}
共有2个答案
尝试向要影响的元素的父级或父级添加类。那么只需在CSS中设置一个规则..
.hide-class.target-element{visibility：hidden；}..请注意，使用可见性性能更好，因为浏览器不会重新计算布局。
然后，如果您想再次显示该元素，只需从父级中移除该类。这种方法性能好，易于管理。
@Sourav想要一个例子..所以
CSS
/* here we hide the element with the '.foo' class when we add the '.hide-foo' class to body */
body.hide-foo .foo {
visibility: hidden;
}
/* this makes the child visibile, even though the parent is hidden. Handy! */
.bar {
visibility: visible;
}
JS
const body = document.body;
body.classList.add('hide-foo');
HTML
<body>
<!-- this is hidden -->
<div class="foo"></div>
<!-- this is visible -->
<div></div>
<!-- this is hidden -->
<div class="foo">
<!-- and this is visible even though the parent is hidden -->
<div class="bar"></div>
</div>
</body>
希望这有助于理解：）
Document.GetElementsByClassName返回HTMLCollection，因此HideInactive函数正在检查HTMLCollection上的Style。迭代数组并检查每个元素。
null
function hideInactive() {
var x = document.getElementsByClassName('inactive');
console.log(x.length);
for (let i = 0 ; i < x.length; i++) {
if (x[i].style.display === "none") {
x[i].style.display = "block";
} else {
x[i].style.display = "none";
}
}
}<button onclick="hideInactive()">Show/hide</button>
<div class="inactive">DIV 1: inactive</div>
<p class="inactive">DIV 2: inactive</p>
<ul>
<li class="inactive">
List item 1: Inactive
</li>
<li>
List item 2: Active
</li>
</ul>-
这让我快发疯了。 我只想有一个按钮来显示和隐藏Bootstrap4中的DIV，每当我切换class=“collapse”时，DIV会显示但不会折叠。 在页面加载div折叠，按钮只工作一次，看着开发者视图在Chrome每当点击按钮它从折叠切换到collapse.show？再次单击它，它每次都会填充collapse.show。 JQuery在标题中。 感谢任何帮助，这让我发疯。在多个设备/浏览器上测试
-
移动端如果使用异步组件加载那么还是需要一点等待时间的，在网络慢时等待时间会更长。显示Loading状态缓解一下用户等待情绪就十分重要。 如果你使用vue-router和vuex，那么可以很容易实现。 首先，注册一个module来保存状态 const store = new Vuex.Store({}) // 这里你可能已经有其他 module store.registerModule('vux'
-
我有两个按钮导航栏。 当单击div#toggle-menu时，它使div#sidebar-mobile-wrapper显示。 当我点击div#toggle-function时，它会显示div#right-content-mobile。 都奏效了。但现在我想，一次只能显示一个div。所以当我点击#toggle-menu时，如果div#right-content-mobile是可见的，它将被隐藏和si
-
我目前正在将AdMob纳入我的一些应用程序，但面临一个问题。我尝试在更改活动时显示一个间隙，因为这将是一个不会打扰用户的地方。 我最初的理解是，显示广告会使活动进入暂停模式，并在广告关闭后恢复。 这种假设似乎是错误的，正如下面的代码一样，活动直接切换，toast显示应该显示广告，但只要我不评论startActivity（意图），我就永远看不到广告。 我正在onCreate中加载广告，然后尝试在另一
-
基本上，我有一个类似的json（这是一个示例，我真正的json有n个字段，它可以是动态的）： 我想输出（第一个位置）： 这是我的代码： https://stackblitz.com/edit/Angular-j2rpdq
-
问题内容： 希望这是一个简单的问题。我有一个我想用按钮切换隐藏/显示 问题答案： 看一下jQuery Toggle HTML： jQuery的： 对于jQuery 1.7及更高版本