使用 jQuery 切换多个 DIV答案

【问题标题】：Toggling multiple DIVs with jQuery使用 jQuery 切换多个 DIV
【发布时间】：2014-06-09 17:48:29
【问题描述】：

我有三个信息面板（ID 为 panel-one、panel-two 和 panel-three 的 div，均属于 info-panel 类），我希望通过单击链接滑入和滑出（这些具有toggle-one、toggle-two 和 toggle-three 的 ID，均具有 toggle 类）。如果单击其他链接之一时显示其中一个 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 n00b，我真的不知道如何整理它。解决这个问题的最佳方法是什么？

【问题讨论】：

标签： jquery toggle

【解决方案1】：

用id 或panels 将您的面板包装在<div> 中：

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

【讨论】：

@charlietfl：谢谢，错过了。

【解决方案2】：

根据Blender 发布的内容，我最终选择了这个：

HTML：

<div id="togglelinks">
    <ul>
        <li><a class="toggle" href="#panel-one">One</a></li>
        <li><a class="toggle" href="#panel-two">Two</a></li>
        <li><a class="toggle" href="#panel-three">Three</a></li>
    </ul>
</div>

<div id="panels">
    <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>
</div>

jQuery：

$(".toggle").click(function() {
    var $toggled = $(this).attr('href');

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

    return false;
});

对此很满意... 27 行 javascript 减至 6 行，这一切似乎都有效！但是再次感谢 Blender，否则我永远不会走到这一步。

【讨论】：

【解决方案3】：

我就是这样做的：

$("info-panel").click(function(){

    //put your div in memory
    var chosen = $(this);

    //Slide down all the toggle div or hide them
    $('.info-panel').slideUp('slow', function(){);

    //open the div you wanted
    chosen.slideToggle('slow',function(){});
}

然后，激活它：

function openDiv(divId){
$("#"+divId).click();
}

在html上，在a href="#" ...设置onclick属性之后

a href="#" onclick="openDiv('panel-one')"

【讨论】：