如何切换时，另一格打开

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(); 

}