javascript 如何打开特定的手风琴div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22032200/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to open a specific accordion div?
提问by Jake
This seems a straight forward question but I can't seem to find the answer to this. I'm trying to expand, open, collapse (whichever youd like to call it) a specific accordion. Say I have three panels, with ids #panel1, #panel2, and #panel3. And I have the panel headings with #p1, #p2, #p3.
这似乎是一个直截了当的问题，但我似乎无法找到答案。我正在尝试扩展、打开、折叠（不管你怎么称呼它）一个特定的手风琴。假设我有三个面板，ID 为 #panel1、#panel2 和 #panel3。我有带有#p1、#p2、#p3 的面板标题。
If I click on the headings everything works great, #p1 will open #panel1, like how accordion is supposed to work. But I have a seperate link on the page which I'd like it to open #panel2.
如果我点击标题一切正常，#p1 将打开#panel1，就像手风琴应该如何工作一样。但是我在页面上有一个单独的链接，我希望它打开#panel2。
slideToggle, and slideDown cause issues since if you click the heading after, it messes with accordion. I don't want to use hash so I added this to onclick on the link I want to open panel2.
slideToggle 和 slideDown 会导致问题，因为如果您单击之后的标题，它会与手风琴混淆。我不想使用哈希，所以我将它添加到 onclick 我想打开 panel2 的链接。
$("#p2").click();
This works great, except if you click on that link again, it'll close the accordion div, I'd like it to stay open. Any ideas? Thanks much in advance.
这很好用，除非您再次单击该链接，它将关闭手风琴 div，我希望它保持打开状态。有任何想法吗？非常感谢。
回答by Alpha Codemonkey
You can make the second panel active by setting the active option.
您可以通过设置 active 选项来激活第二个面板。
$("#accordion").accordion("option", "active", 1);
Or assuming your accordion HTML is default jQuery UI syntax (header/div/header/div/etc.), you can get the index of the panel pragmatically with $("#panel2").index("#accordion div")
或者假设你的手风琴 HTML 是默认的 jQuery UI 语法（header/div/header/div/etc.），你可以用 $("#panel2").index("#accordion div")
$("#accordion").accordion("option", "active", $("#panel2").index("#accordion div"));
回答by Gisheri
use an 'open' class: If it has the open class, close it and remove 'open' class. otherwise, open it, and add an 'open' class. instead of clicking it with the external link, just slide it up and add the open class. Here is a very basic jquery accordian. http://jsfiddle.net/L8fMq/2/
使用“开放”类：如果它有开放类，关闭它并删除“开放”类。否则，打开它，并添加一个“开放”类。而不是使用外部链接单击它，只需将其向上滑动并添加开放类。这是一个非常基本的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();
});
回答by Avishek
This should do the trick:
这应该可以解决问题：
$("#p2").click(function () {
$("#accordion").accordion("option", "active", 1);
});
