顯示/隱藏具有鏈接的多個Div

Question

我沒有明確解釋我要做什么。 希望這會更好。

目前，我正在使用此Fiddle切換某些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> 

Answer 1

這應該起作用...使用傳遞的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> 

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