使用jQuery切换多个DIV

时间:2012-06-18 00:42:05

标签: jquery toggle

我有三个信息面板(ID为panel-onepanel-twopanel-three的div,所有内容都为info-panel},我希望它可以滑入和滑出点击链接(这些链接包含ID toggle-onetoggle-twotoggle-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 n00b,我真的不知道怎么去整理它。解决这个问题的最佳方法是什么?

3 个答案:

答案 0 :(得分:5)

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

并且此 应该工作:

{{1}}

答案 1 :(得分: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,因为我从来没有达到这一点。

答案 2 :(得分:1)

那就是我怎么做的:

$("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')"