Question

我有一长串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时关闭第一个div，依此类推 - 一次只打开一个div？

谢谢

Answer 1

您可以使用jQuery Start with Selector隐藏以incometoggle开头的所有div，并使用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。并使用jQuery Start with Selector

隐藏除当前之外的所有div

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

<强> DEMO Using JQuery

Answer 2

这样你就可以在前一个

结束时打开下一个

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 3

只使用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 4

您可以更轻松地使用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 5

我会略微区别对待它并使用类和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();

}

Answer 6

如果您想使用纯JavaScript，那么此解决方案将适合您。

<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

如何在打开另一个div时关闭所有div

6 个答案: