1

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

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

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

还有一个第 5 个按钮，打开 Div1 是没有打开的 Div，或者如果打开了任何 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

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

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

提前致谢

4

4 回答 4

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();
}
于 2012-05-23T14:14:20.117 回答
0

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

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

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

于 2012-05-23T14:15:25.043 回答
0 
<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>
于 2012-05-23T14:17:04.693 回答
0

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

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'); 
});
于 2012-05-23T14:25:38.790 回答