jQuery 切换 div答案

【问题标题】：jQuery Toggle DivsjQuery 切换 div
【发布时间】：2012-05-23 22:25:38
【问题描述】：

在我正在做的页面中实现一些 jQuery 时遇到了一点问题。

我已经完成了我想要做的事情的一半，但我无法理解最后一部分。虽然我使用 jQuery 的 sn-ps 有一段时间了，但在编写自己的代码时我还是很陌生。

基本上我希望通过单击相关链接打开默认隐藏的 4 个 Div，但任何时候都应该只显示一个 Div，因此如果 Div1 已打开，单击 Div2 按钮将关闭 Div1 并打开第 2 部分。

还有一个第 5 个按钮，打开 Div1 是没有打开的 Div，或者如果打开了任何 Div，则关闭该打开的 Div。

我一直在查看这些页面以寻求帮助，但没有什么是我真正想要的：

http://css-tricks.com/forums/discussion/16451/.slidetoggle-one-div-a-time-problems-please-help/p1

www.randomsn-ps.com/2011/04/10/how-to-hide-show-or-toggle-your-div-with-jquery/

webdesignerwall.com/tutorials/jquery-tutorials-for-designers

目前我已经做到了，以便在单击按钮时显示 Div，但仅此而已，我无法使这些示例中的切换逻辑在我的代码上工作。

我在这里设置了一个 JSFiddle： http://jsfiddle.net/vx6qu/2/

提前致谢

【问题讨论】：

你只需要隐藏所有匹配$('.toggle-content')的DIV

标签： javascript jquery

【解决方案1】：

解决方法很简单：

关闭所有东西，不管哪一个是打开的
只打开你需要的那个

var current = null;
var all = $(".togglediv");

function onClickOne() {
    all.hide();
    current = $("#one").show();
}
function onClickTwo() {
    all.hide();
    current = $("#two").show();
}
...

function onClickSpecial() {
    if (current) {
        all.hide();
        current = null;
    } else
        current = $("#one").show();
}

【讨论】：

【解决方案2】：

你很接近，但有一个更清洁的方法：

http://jsfiddle.net/jbabey/vx6qu/3/

$('#toggle-image').on('click', function () {
    if ($('.toggled').length === 0) {
        // none are open, open the first
        $('.toggle-content').eq(0).slideToggle().addClass('toggled');
    } else {
        // one is open, hide it
        $('.toggled').slideToggle().removeClass('toggled');
    }
});

$('li > a').on('click', function () {
    // extract the number
    var num = parseInt(this.id.replace('toggle-', ''), 10);

    // cancel the event if they clicked the link that is already open
    if ($('.toggle-content').eq(num - 1).hasClass('toggled')) {
        return false;    
    }

    // hide the old one
    $('.toggled').slideToggle().removeClass('toggled');

    // show the new one
    $('.toggle-content').eq(num - 1).slideToggle().addClass('toggled'); 
});

【讨论】：

非常感谢大家的解决方案。尤其是 jbabey 和 Bergi，非常感谢，这是我第一次在 Stackoverflow 上发帖，对答案的速度和质量感到惊讶。
@Spitfire 答案的质量将反映问题的质量和投入的努力:)

【解决方案3】：

我认为您正在寻找的是“隐藏”选择器，例如：

if( jqueryObject.is(':hidden') ) {
    // it's hidden
} else {
    // it's not
}

这也适用于 is(':visible')

【讨论】：

【解决方案4】：

<div id='div1' style='display:none;'>Div 1</div>
<div id='div2' style='display:none;'>Div 2</div>
<div id='div3' style='display:none;'>Div 3</div>
<div id='div4' style='display:none;'>Div 4</div>

<a href='showDiv(1);'>Show Div 1</a>
<a href='showDiv(2);'>Show Div 2</a>
<a href='showDiv(3);'>Show Div 3</a>
<a href='showDiv(4);'>Show Div 4</a>

<script>
var showDiv = function(n) {
    var i;
    for (i = 1; i < 5; i++) {
        if (i == n)
            $('#div' + i).show();
        else
            $('#div' + i).hide();
    }    
}
</script>

【讨论】：