2012-06-18 509 views
2

我有三個信息面板(ID分別爲panel-one,panel-twopanel-three,所有的類info-panel),我希望有一個鏈接點擊和滑出(這些ID有ID toggle-one,toggle-twotoggle-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位,我真的不知道如何去整理它。解決這個問題的最好方法是什麼?

回答

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,因爲我從來沒有想到過這點。

+0

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

5

panelsid包裝你的面板在<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; 
}); 
+0

@charlietfl:謝謝,錯過了。 – Blender

+0

np - 正準備發佈幾乎相同的代碼 – charlietfl

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

,在href =之後 「#」 ......設置onclick屬性

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