如何切換時，另一格打開

Question

我的div具有以下結構的長連勝關閉所有div：

<div id="income"> 
<h5 onclick="toggle_visibility('incometoggle');">INCOME</h5> 
<div id="incometoggle"> 
     <h6>Income Total</h6> 
</div> 
</div> 

<div id="income2"> 
<h5 onclick="toggle_visibility('incometoggle2');">INCOME2</h5> 
<div id="incometoggle2" style="display:none;"> 
     <h6>Income Total2</h6> 
</div> 
</div> 

<div id="income3"> 
<h5 onclick="toggle_visibility('incometoggle3');">INCOME3</h5> 
<div id="incometoggle3" style="display:none;"> 
     <h6>Income Total3</h6> 
</div> 
</div> 

我有這樣的代碼，使他們打開和關閉：

function toggle_visibility(id) { 
var e = document.getElementById(id); 
if (e.style.display == 'none') e.style.display = 'block'; 
else e.style.display = 'none'; 
} 

在現場加載時，第一個div被打開，其餘的被關閉。

http://jsfiddle.net/txa2x9qq/3/

我怎麼能掙錢的時候，第二個被打開，等等第一個div接近 - 在同一時間只有一個開了有什麼打算？

謝謝

Answer 1

如果你想在純Java腳本來執行，那麼這個解決會爲你工作。

<div id="income"> 
<h5 onclick="toggle_visibility('incometoggle');">INCOME</h5> 
    <div id="incometoggle" class="income"> 
      <h6>Income Total</h6> 
    </div> 
</div> 

<div id="income2"> 
<h5 onclick="toggle_visibility('incometoggle2');">INCOME2</h5> 
    <div id="incometoggle2" style="display:none;" class="income"> 
      <h6>Income Total2</h6> 
    </div> 
</div> 

<div id="income3"> 
<h5 onclick="toggle_visibility('incometoggle3');">INCOME3</h5> 
    <div id="incometoggle3" style="display:none;" class="income"> 
      <h6>Income Total3</h6> 
    </div> 
</div> 




function toggle_visibility(id) { 
    var e = document.getElementById(id); 
    var myClasses = document.querySelectorAll('.income'), 
    i = 0, 
    l = myClasses.length; 

    for (i; i < l; i++) { 
     myClasses[i].style.display = 'none'; 
    } 
    if (e.style.display == 'none') e.style.display = 'block'; 

} 

DEMO

Answer 2

您可以使用jQuery Start with Selector隱藏所有div的開始incometoggle和使用not()排除當前div

請參見下面的功能

function toggle_visibility(id) { 
    var e = document.getElementById(id); 
    if (e.style.display == 'none') e.style.display = 'block'; 
    else e.style.display = 'none'; 
    // hide all div except current 
    $('div[id^=incometoggle]').not('#'+id).hide(); 
} 

DEMO

編輯 - 你只能在jQuery中編寫完整的邏輯，只需將點擊事件綁定到h5元素並使用toggle顯示/隱藏它旁邊的div即可。而隱藏除當前所有的div使用jQuery Start with Selector

$(function() { 
    $('h5').click(function(){ 
     var incomeDiv = $(this).next('div'); 
     $(incomeDiv).toggle();   
     $('div[id^=incometoggle]').not(incomeDiv).hide(); 
    }); 
}); 

DEMO Using JQuery

Answer 3

這種方式，你只需打開的previus結束下一

function toggle_visibility(id,next) {  
    var e = document.getElementById(id); 
    if (e.style.display == 'none') e.style.display = 'block'; 
    else e.style.display = 'none'; 

    if (next != undefined) 
    { 
     toggle_visibility(next); 
    } 
} 

這樣稱呼它：

<h5 onclick="toggle_visibility('incometoggle','incometoggle2');">INCOME</h5> 

http://jsfiddle.net/txa2x9qq/3/

Answer 4

只需使用Vanilla Javascript，就像你實際做的那一刻：

function toggle_visibility(id) { 
    // Your clicked element 
    var e = document.getElementById(id); 

    // List containing all the divs which id starts with incometoggle. 
    var allDivs = document.querySelectorAll('div[id^=incometoggle]'); 

    // Loop through the list and hide the divs, except the clicked one. 
    [].forEach.call(allDivs, function(div) { 
     if (div != e) { 
      div.style.display = 'none'; 
     } 
     else { 
      e.style.display = e.style.display == 'none' ? 'block' : 'none'; 
     } 
    }); 
} 

Demo

Answer 5

您可以更輕鬆地使用jQuery：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script> 
    function toggle_visibility(id) { 
     $("div[id^='incometoggle']").hide(); 
     $('#'+id).show(); 
    } 
</script> 

Answer 6

我想接近它略有不同，並使用一類具有一個jQuery選擇沿 -

<div id="income"> 
    <h5 onclick="toggle_visibility('incometoggle');">INCOME</h5> 
    <div id="incometoggle" class="income-total"> 
     <h6>Income Total</h6> 
    </div> 
</div> 

... 

function toggle_visibility(id) { 

    // hide all divs with class income-total 
    $('.income-total').hide(); 

    // show the desired div 
    $('#' + id).show(); 

}