JQuery手風琴：將獨特風格應用於「打開」狀態

我發現了一個簡單的JQuery手風琴結構，它使用DIV而不是典型的UL結構。JQuery手風琴：將獨特風格應用於「打開」狀態

當您點擊菜單 DIVS，一個特定的對應面板 DIV幻燈片打開。如何製作面板以便在面板打開時對應菜單 DIV是否應用了不同的樣式？

JS：

$(document).ready(function() { 
    $("#menu1").data("panelId", "#collapse_about"); 
    $("#menu2").data("panelId", "#collapse_portfolio"); 
    $("#menu3").data("panelId", "#collapse_contact"); 

    $("#menu1, #menu2, #menu3").click(function() { 
     var first = true; 
     var panelId = $(this).data("panelId"); 
     $(".class1").not(panelId).slideUp(function() { 
      if (first) { 
       first = false; 
       $(panelId).slideToggle(400); 
      } 
     }); 
    }); 
});

CSS：

.class1 {width:200px; height:200px; border:1px solid black; display:none;} 
#collapse_about {background:red; margin-bottom:10px;} 
#collapse_portfolio {background:blue; margin-bottom:10px;} 
#collapse_contact {background:orange; margin-bottom:10px;} 
    #menu1 {cursor:pointer; display:block; width:200px; border:1px solid black; margin-bottom:10px;} 
#menu2 {cursor:pointer; display:block; width:200px; border:1px solid black; margin-bottom:10px;} 
#menu3 {cursor:pointer; display:block; width:200px; border:1px solid black; margin-bottom:10px;}

HTML：

<div id="menu1">Menu 1</div> 
<div id="collapse_about" class="class1">Content 1</div> 
<div id="menu2">Menu 2</div> 
<div id="collapse_portfolio" class="class1">Content 2</div> 
<div id="menu3">Menu 3</div> 
<div id="collapse_contact" class="class1">Content 3</div>

這裏是的jsfiddle代碼：http://jsfiddle.net/Gaelen/aTR2b/2/

我真的很感激任何幫助！ :)

來源

2011-03-29 Gaelen

這是烏拉圭回合的答案：

http://jsfiddle.net/maniator/aTR2b/3/

我加入CSS：

.menu_active{ background: grey;}

而對於JS：

$("#menu1, #menu2, #menu3").click(function() { 
    $(".menu_active").removeClass('menu_active'); 
    $(this).addClass('menu_active'); 
    //... rest of the fn

來源

2011-03-29 21:35:13 Neal

太棒了。非常感謝你！ – Gaelen 2011-03-29 21:46:27

然後當你得到你想要的正確答案時，什麼是正確的方式在stackoverflow。你選擇它作爲'接受'比人們最有可能幫助你更多的未來Q's :-) – Neal 2011-03-29 21:47:26

哦，我以爲我已經這樣做了。那是大綠色的勾號？ – Gaelen 2011-03-29 22:22:06

-1

菜單DIV將得到ui-state-active樣式在打開時應用於它。使用它。

來源

2016-01-19 11:16:19 Sabroni

JQuery手風琴：將獨特風格應用於「打開」狀態

回答

相關問題