jQuery用戶界面 - 顯示/關閉標籤手風琴分別

我試圖建立標籤，我可以在同一時間打開多個標籤頁的手風琴式的列表。基本上我希望它喜歡在這裏工作：在底部的文檔下http://jqueryui.com/demos/accordion/當你看的選項標籤中，列出了禁用，活動，等你可以打開一個或所有選項卡。jQuery用戶界面 - 顯示/關閉標籤手風琴分別

我看不出你如何設置一個手風琴做到這一點，所以我已經做了的作品撥動一個基本版本，但我必須手動輸入每個選項卡，打開/關閉的ID。我敢肯定有一個更有效的方式來做到這一點，因此擴展爲任意數量的項目，可能有人請告訴我這是什麼......

<style> 
.newClass { display: none } 
</style> 
<script> 
$(function() { 
    $("#button-1").click(function() { 
     $("#effect-1").toggleClass("newClass", 1000); 
     return false; 
    }); 
    $("#button-2").click(function() { 
     $("#effect-2").toggleClass("newClass", 1000); 
     return false; 
    }); 
}); 
</script> 

<a href="#" id="button-1" class="ui-state-default ui-corner-all">Run Effect 1</a> 
<div id="effect-1" class=" ui-corner-all"> 
     Toggle1 
</div> 

<a href="#" id="button-2" class="ui-state-default ui-corner-all">Run Effect 2</a> 
<div id="effect-2" class=" ui-corner-all"> 
     Toggle 2 
</div>

獎勵分，如果任何一個能展示如何製作動畫滑動向上/向下當您單擊按鈕

來源

2012-04-03 Al_

你只需要設置一個泛型類的所有網頁上的切換。

我用的.next（）來切換右後無論是。你可以改變這是一個類或其他任何東西。

這裏有一個演示：http://jsfiddle.net/gZBDK/

這裏有next（）的更多信息：http://api.jquery.com/next/

來源

2012-04-03 11:27:17

謝謝，完美的作品。不要以爲你能指出正確的方向來製作它的上下滑動。 – 2012-04-03 11:34:14

雅檢查了這一點：http://api.jquery.com/toggle/ – 2012-04-03 11:40:45

這裏有一個更新的演示：http://jsfiddle.net/G972a/1/ – 2012-04-03 11:41:12

jQuery用戶界面 - 顯示/關閉標籤手風琴分別

回答

相關問題