顯示/隱藏的鏈接多個div

我沒有解釋清楚什麼，我要怎樣做。希望這會更好。顯示/隱藏的鏈接多個div

目前我使用this Fiddle切換一些div。它起着手風琴的作用，一次只顯示一個div。點擊其中一個標題將顯示該div的內容並點擊另一個標題將隱藏第一個div並顯示該標題。

什麼我有麻煩（和想要做的）打開一個DIV我想，直到第一個div被關閉隱藏訪問其它的div時。

這意味着如果我點擊「內容2」，顯示的內容，我想，直到內容2再次關閉隱藏訪問內容1，Content3和Content4。

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')"> 
 
\t Content1 
 
</a> 
 
<a href="javascript:ReverseDisplay('content2')"> 
 
\t Content2 
 
</a> 
 
<a href="javascript:ReverseDisplay('content3')"> 
 
\t Content3 
 
</a> 
 
<a href="javascript:ReverseDisplay('content4')"> 
 
\t 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>

來源

2016-10-01 PthPndr

那麼如何將goint再次打開該鏈接？ –

你的問題是，如果這是可能的？是的，這當然是可能的。 –

是的，很可能。如果你自己做了一些嘗試，並且有問題可以隨意返回，那麼顯示你的嘗試，我確定有人會調試它，並解釋這個問題可能會提供一個解決方案。 – NewToJS

這應該工作...使用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>

來源

2016-10-01 16:10:25

我認爲他是要求手風琴功能的風格，點擊一個鏈接顯示其股利和隱藏所有別人的時候。我將用適當的代碼編輯你的答案。 – Dez

@Dez這不是要求。不要推測你自己的要求。 –

*「的意思，如果我點擊‘uniquename’，以顯示其內容我可以隱藏的鏈接‘uniquename1’，而它的開放？」 *不是炒出來的手。 – Dez

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

來源

2016-10-01 16:49:10 Dez

Dez，這個腳本通過點擊鏈接切換內容（div）。還有可能在其中一個活動時隱藏其餘鏈接？ – PthPndr

這是可能的，但它會有用嗎？如果您在其中一個活動時隱藏其餘鏈接，那麼您打算如何訪問其中的內容？ – Dez

通過關閉打開的div。由於它起到手風琴的作用，這個想法是關閉div以查看其餘鏈接。 – PthPndr

顯示/隱藏的鏈接多個div

回答

相關問題