使用jQuery切换多个DIV

Question

我有三个信息面板(具有ID的div panel-one,panel-two以及panel-three所有类的div info-panel),我希望在点击链接时滑入和滑出(这些具有ID toggle-one,toggle-two以及toggle-three所有类别toggle).如果其中一个div在单击其中一个链接时显示,我想隐藏可见的div并显示新的div.如果单击div自己的链接,我想切换显示/隐藏.我正在使用以下代码执行此操作:

HTML:

<ul>
    <li><a id="toggle-one" class="toggle">One</a></li>
    <li><a id="toggle-two" class="toggle">Two</a></li>
    <li><a id="toggle-three" class="toggle">Three</a></li>
</ul>

<div id="panel-one" class="info-panel"><!-- content here --></div>
<div id="panel-two" class="info-panel"><!-- content here --></div>
<div id="panel-three" class="info-panel"><!-- content here --></div>

jQuery的:

$("#toggle-one").click(function () {
    if($("#panel-two").is(":visible")) {
        $("#panel-two").css("z-index", "9997").hide("slide", {direction: 'up'}, 750);
    } else if($("#panel-three").css("z-index", "9997").is(":visible")) {
        $("#panel-three").css("z-index", "9997").hide("slide", {direction: 'up'}, 750);
    }
    $("#panel-one").css("z-index", "9998").toggle("slide", {direction: 'up'}, 750);
    return false;
});

$("#toggle-two").click(function () {
    if($("#panel-one").is(":visible")) {
        $("#panel-one").css("z-index", "9997").hide("slide", {direction: 'up'}, 750);
    } else if($("#panel-three").is(":visible")) {
        $("#formlink").css("z-index", "9997").hide("slide", {direction: 'up'}, 750);
    } 
    $("#panel-two").css("z-index", "9998").toggle("slide", {direction: 'up'}, 750);
    return false;
});

$("#toggle-three").click(function () {
    if($("#panel-one").is(":visible")) {
        $("#panel-one").css("z-index", "9997").hide("slide", {direction: 'up'}, 750);
    }  else if($("#panel-two").is(":visible")) {
        $("#panel-two").css("z-index", "9997").hide("slide", {direction: 'up'}, 750);
    }
    $("#panel-three").css("z-index", "9998").toggle("slide", {direction: 'up'}, 750);
    return false;
});

它有效,但它非常冗长,并且不能很好地扩展 - 管理三个div信息很好,但是如果/何时增加更多,它将变成一个难以维持的主要痛苦.我尝试使用类似于Show/Hide Multiple Divs with Jquery中概述的方法,但似乎无法让它正常工作 - 切换和隐藏行为不能很好地工作(隐藏的潜水表演,当他们不应该'然后立即隐藏和类似的东西).同样,我似乎无法让Jquery中显示的示例在3个div上切换工作.

我确信有一个更清洁的方法来做到这一点,但因为我有点jQuery和javascript n00b,我真的不知道怎么去整理它.解决这个问题的最佳方法是什么？

Answer 1

包装你的面板在<div>同一个id的panels:

<div id="panels">
  <div class="info-panel"><!-- content here --></div>
  <div class="info-panel"><!-- content here --></div>
  <div class="info-panel"><!-- content here --></div>
</div>

这应该工作:

$(".toggle").on('click', function() {
    var $panel = $('#panels').children().eq($(this).parent().index());

    $panel.toggle("slide", {direction: 'up'}, 750);
    $panel.siblings().hide("slide", {direction: 'up'}, 750);

    return false;
});