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

這似乎是一個簡單的問題，但我似乎無法找到答案。我試圖擴大，開放，崩潰（無論你喜歡稱之爲）特定的手風琴。假設我有三個面板，分別是ID＃panel1，＃panel2和＃panel3。我有面板標題＃p1，＃p2，＃p3。如何打開特定的手風琴div？

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

slideToggle和slideDown會導致問題，因爲如果您之後單擊該標題，則會手風琴混亂。我不想使用散列，所以我將其添加到我想要打開panel2的鏈接上點擊。

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

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

來源

2014-02-26 Jake

你有沒有嘗試讀取該面板是打開還是關閉，點擊它來確定應採取何種行動的jQuery後？ – KeepMove

您可以通過setting the active option使第二個面板激活。

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

或者假設你的手風琴HTML是默認的jQuery UI的語法（頁眉/ DIV /頭/ DIV /等），就可以得到該面板的索引務實與$("#panel2").index("#accordion div")

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

來源

2014-02-26 05:10:09

謝謝！你寫的第二行正是我需要的 – Jake

使用'open'類：如果它有公開課，關閉它並刪除'open'類。否則，打開它，然後添加一個「打開」類。而不是用外部鏈接點擊它，只需滑動它並添加公開課。這是一個非常基本的jquery手風琴家。 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(); 
});

來源

2014-02-26 06:28:07 Gisheri

謝謝！打開了所有人的解決方案：:) – Jake

這應該做的伎倆：

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

來源

2014-02-26 06:42:47 Avishek

謝謝.click（函數轉而成爲完成此操作的另一種方式 – Jake

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

回答

相關問題