我没有清楚地解释我想做什么。希望这会更好。
目前我正在使用 this Fiddle切换一些div。它充当 Accordion ,一次只显示一个 div。单击其中一个标题将显示该 div 的内容,单击另一个标题将隐藏第一个 div 并显示该 div。
我遇到的麻烦(并且想做的)是在打开一个 div 时我想隐藏对其他 div 的访问,直到第一个 div 关闭。
意思是如果我点击“Content2”来显示该内容,我想隐藏对 Content1、Content3 和 Content4 的访问,直到 Content 2 再次关闭。
function ReverseDisplay(d) {
var els = document.querySelectorAll('.toggle.active:not(#' + d + ')');
for (var i = 0; i < els.length; i++) {
els[i].classList.remove('active');
}
document.getElementById(d).classList.toggle('active')
}
.toggle {
display: none;
}
.toggle.active {
display: block;
}
<a href="javascript:ReverseDisplay('content1')">
Content1
</a>
<a href="javascript:ReverseDisplay('content2')">
Content2
</a>
<a href="javascript:ReverseDisplay('content3')">
Content3
</a>
<a href="javascript:ReverseDisplay('content4')">
Content4
</a>
<div id="content1" class="toggle">
<p>Content 1 goes here.</p>
</div>
<div id="content2" class="toggle">
<p>Content 2 goes here.</p>
</div>
<div id="content3" class="toggle">
<p>Content 3 goes here.</p>
</div>
<div id="content4" class="toggle">
<p>Content 4 goes here.</p>
</div>
最佳答案
这应该有效...使用传递的 id
来识别元素并通过检查 active
是否存在来添加类。
function ReverseDisplay(d) {
var id = d
var el = document.getElementById(id)
var elClassList = el.classList
var [...active] = document.querySelectorAll('.toggle.active')
debugger
if (active.length === 0) {
el.classList.add('active')
} else if (id === active[0].id) {
el.classList.remove('active')
}
}
.toggle {
display: none;
margin-top: 40px;
}
.toggle.active {
display: block;
}
a {
position: fixed;
top: 10px;
}
<a href="javascript:ReverseDisplay('uniquename')">
Click to show/hide.
</a>
<div id="uniquename" class="toggle">
<p>Content 1 goes here.</p>
</div>
<a href="javascript:ReverseDisplay('uniquename1')" style="left:150px">
Click to show/hide.
</a>
<div id="uniquename1" class="toggle">
<p>Content 2 goes here.</p>
</div>
关于javascript - 显示/隐藏带有链接的多个 Div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39808654/