Question

我在将一些jQuery实现到我正在进行的页面时遇到了一些问题。

我有大约一半的时间让它做我想做的事，但我无法理解最后一部分。虽然我已经使用了jQuery的片段了一段时间，但在编写我自己的代码时我还是很新的。

基本上我想通过点击相关链接打开默认隐藏的4个Div，但任何时候都只能显示一个Div，所以如果Div1已经打开，点击Div2按钮关闭Div1并打开DIV2。

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

我一直在寻找这些页面寻求帮助，但我所追求的并不是什么：

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

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

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

目前我已经完成了Divs按钮点击，但就是这样，我无法确定这些示例中的切换逻辑是否适用于我的代码。

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

提前致谢

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

Answer 2

我认为你所寻找的是＆＃34;隐藏＆＃34;选择器，例如：

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

这也适用于（＆＃39;：可见＆＃39;）

Answer 3

<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>

Answer 4

你很亲密，但有更清洁的方法：

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

jQuery切换Divs

4 个答案: