用jQuery切换多个DIV

我有三个信息面板（ID分别为panel-one,panel-two和panel-three，所有的类info-panel），我希望有一个链接点击和滑出（这些ID有ID toggle-one,toggle-two和toggle-three，全部与类别toggle）。如果其中一个div在点击其他链接时显示，我想隐藏可见div并显示新的链接。如果div的自己的链接被点击，我想切换显示/隐藏。我使用下面的代码来做到这一点：用jQuery切换多个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; 
});

它的工作原理，但它是非常详细的，不会很好地扩展 - 管理信息的三个部分是好的，但是如果/当时间增加时，它将变成一个重大的维护工作。我试过使用类似于Show/Hide Multiple Divs with Jquery中概述的方法，但似乎无法使其正常工作 - 切换和隐藏行为不能很好地工作（隐藏潜水表演时，他们不应该立即隐藏和事物像那样）。同样，我似乎也无法得到Jquery toggle on 3 divs中显示的示例。

我敢肯定有一个更干净的方式来做到这一点，但由于我是一个jQuery和JavaScript n00b位，我真的不知道如何去整理它。解决这个问题的最好方法是什么？

来源

2012-06-18 campegg

考虑从什么张贴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，因为我从来没有想到过这点。

来源

2012-06-18 12:08:00 campegg

工作示例：http://jsfiddle.net/b7C2d/1/ – campegg

与panels的id包装你的面板在<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; 
});

来源

2012-06-18 00:46:07 Blender

@charlietfl：谢谢，错过了。 – Blender

np - 正准备发布几乎相同的代码 – charlietfl

这就是我怎么会做它：

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

，在href =之后 “＃” ......设置onclick属性

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

来源

2012-06-18 01:32:23

用jQuery切换多个DIV

回答

相关问题