如何打開特定的手風琴div？

Question

這似乎是一個直截了當的問題，但我似乎找不到答案。 我正在嘗試擴展，打開，折疊（任何您想稱呼它的地方）特定的手風琴。 假設我有三個面板，分別是ID＃panel1，＃panel2和＃panel3。 我的面板標題是＃p1，＃p2，＃p3。

如果單擊標題，一切正常，＃p1將打開＃panel1，就像手風琴應該如何工作一樣。 但是我在頁面上有一個單獨的鏈接，希望它打開＃panel2。

slideToggle和slideDown會引起問題，因為如果您單擊后面的標題，則會與手風琴混淆。 我不想使用哈希，所以我將其添加到要打開panel2的鏈接的onclick上。

$("#p2").click();

這很好用，除非再次單擊該鏈接，它將關閉手風琴div，我希望它保持打開狀態。 有任何想法嗎？ 在此先感謝。

Answer 1

您可以通過設置激活選項來激活第二個面板。

$("#accordion").accordion("option", "active", 1);

或者假定您的手風琴HTML是默認的jQuery UI語法（header / div / header / div / $("#panel2").index("#accordion div") ），則可以使用$("#panel2").index("#accordion div")實用地獲取面板的索引$("#panel2").index("#accordion div")

$("#accordion").accordion("option", "active", $("#panel2").index("#accordion div"));

Answer 2

使用“打開”類：如果具有打開類，則將其關閉並刪除“打開”類。 否則，請打開它，並添加一個“打開”類。 無需單擊外部鏈接，只需向上滑動並添加打開的類即可。 這是一個非常基本的jQuery Accordian。 http://jsfiddle.net/L8fMq/2/

<style>
.contents {display:none; border: 1px solid #ccc; }
.header {padding: 10px; border: 1px solid #ccc; background-color: #ddd;
</style>

<a class='externalLink'>Open Panel 2</a>
<div class='panel panel1'>
    <div class='header'>Panel 1</div>
    <div class='contents'>
        <p>A bunch of content</p>
    </div>
</div>
<div class='panel panel2'>
    <div class='header'>Panel 2</div>
    <div class='contents'>
        <p>A bunch of content</p>
    </div>
</div>
    <div class='panel panel3'>
    <div class='header'>Panel 3</div>
    <div class='contents'>
        <p>A bunch of content</p>
    </div>
</div>

$('.panel .header').click(function(){
    if($(this).parent().hasClass("open")){
        $(this).parent().find(".contents").slideUp();
        $(this).parent().removeClass("open");
    }
    else {
        $(this).parent().find(".contents").slideDown();
        $(this).parent().addClass("open");
    }
        $(this).parent().siblings().find(".contents").slideUp();
    });
$('.externalLink').click(function(){
    $('.panel2 .contents').slideDown().parent().addClass("open");

    $(this).parent().siblings().find(".contents").slideUp();
});

Answer 3

這應該可以解決問題：

$("#p2").click(function () {
    $("#accordion").accordion("option", "active", 1);
});