jquery - 使用 jQuery 切换多个 DIV

Question

我有三个信息面板(ID 为 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 toggle on 3 divs 中显示的示例。要么去工作。

我确信有一种更简洁的方法可以做到这一点，但由于我对 jQuery 和 javascript 不太熟悉，所以我真的不知道如何整理它。解决这个问题的最佳方法是什么？

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