Question

我没有清楚地解释我想要做什么。希望这会更好。

目前，我正在使用this Fiddle切换一些div。它充当手风琴，一次只显示一个div。单击其中一个标题将显示该div的内容，单击另一个标题将隐藏第一个div并显示该div。

我遇到麻烦（并且想做）是在打开一个div时我想隐藏对其他div的访问，直到第一个div关闭。

如果我点击＆＃34; Content2＆＃34;为了显示该内容，我想隐藏对Content1，Content3和Content4的访问权限，直到Content 2再次关闭。

＆＃13;

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')

}

＆＃13;

.toggle {
  display: none;
}
.toggle.active {
  display: block;
}

＆＃13;

<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>

＆＃13;

Answer 1

这应该有效......使用传递的id标识元素，并通过检查active是否存在来添加类。

＆＃13;

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')
  }
}

＆＃13;

.toggle {
  display: none;
  margin-top: 40px;
}
.toggle.active {
  display: block;
}
a {
  position: fixed;
  top: 10px;
}

＆＃13;

<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>

＆＃13;

Answer 2

使用此javascript函数以实现手风琴风格行为，以获取您可能想要拥有的链接。

function ReverseDisplay(d) {
  var els = document.getElementById(d);
  if (els.classList.contains('active')){
    els.classList.remove('active');
  }else{
    var activeDivs = document.getElementsByClassName('active');
    for (var i = 0; i < activeDivs.length; i++) {
        activeDivs[i].classList.remove('active');
        }
    els.classList.add('active');
  }
}

显示/隐藏带有链接的多个Div

2 个答案: