用于打开 jQuery Accordion 的链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/588030/
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
Link to open jQuery Accordion
提问by glider
I'm trying to open an accordion div from an external link. I see the "navigation: true" option but I'm not sure how to implement it. Do you give each div an id and call the link like this? http://domain.com/link#anchorid
我正在尝试从外部链接打开一个手风琴 div。我看到了“navigation: true”选项，但我不确定如何实现它。你给每个div一个id并像这样调用链接吗？http://domain.com/link#anchorid
I'm new to jQuery so bear with me. Here is the code I'm using if it helps.
我是 jQuery 的新手，所以请耐心等待。如果有帮助，这是我正在使用的代码。
<script type="text/javascript">
$(function(){
$("#accordion").accordion({ header: "h2", autoHeight: false, animated: false, navigation: true });
});
</script>
<div id="accordion">
<div>
<h2><a href="#">Services</a></h2>
<div class="services">
<p>More information about all of these services</p>
</div>
</div>
回答by Armstrongest
The navigation option isn't for panel activation. It's for telling the user where they are.
导航选项不适用于面板激活。这是为了告诉用户他们在哪里。
Using simplified html code:
使用简化的 html 代码：
<div id="accordion">
<div>
<h2><a href="#services">Services</a></h2>
<p>More information about all of these services</p>
</div>
<div>
<h2><a href="#about">About</a></h2>
<p>About us</p>
</div>
</div>
You put the unique ID in the Hyperlink in the title
您将唯一 ID 放在标题的超链接中
Then the jQuery (simplified):
然后是 jQuery（简化版）：
<script type="text/javascript">
$(function(){
$("#accordion").accordion({ header: "h2", navigation: true });
});
</script>
The "navigation : true" will enable you to go www.site.com/#about which makes the "about" panel selected. For activation, there are a couple of ways. Perhaps one way is to grab a query string and put it into the jQuery.
“navigation : true”将使您能够访问 www.site.com/#about，从而选择“about”面板。对于激活，有几种方法。也许一种方法是获取查询字符串并将其放入 jQuery。
With C#
使用 C#
$("#accordion").accordion("activate", '<%= Request.QueryString["id"] %>');
With PHP
使用 PHP
$("#accordion").accordion("activate", '<?php echo $_GET['id']; ?>');
Which will allow you to specify which panel to open by www.site.com?id=2
这将允许您指定通过 www.site.com?id=2 打开哪个面板
回答by DawnPaladin
The navigationoption which many of these answers refer to was deprecatedin jQuery UI 1.9and removedin 1.10. The reason given was:
navigation许多这些答案所引用的选项在 jQuery UI 1.9 中已被弃用，并在 1.10 中被删除。给出的理由是：
This functionality was disabled by default and is only one of many ways that you might want to determine which panel to activate on initialization. As such, we've deprecated this in favor of just handling the logic outside of accordion and setting the active option appropriately.
默认情况下，此功能是禁用的，这只是您可能想要确定在初始化时激活哪个面板的众多方法之一。因此，我们已经弃用了这一点，而是只处理手风琴之外的逻辑并适当地设置活动选项。
So coders using the newer versions of jQuery UI will need to write their own code to handle this feature.
因此，使用较新版本 jQuery UI 的编码人员需要编写自己的代码来处理此功能。
For my site, I accomplished this with a JavaScript switchstatement just before the </body>tag. (I'm not an experienced coder, so others should feel free to improve this answer.)
对于我的网站，我switch在</body>标记之前使用 JavaScript语句完成了此操作。（我不是一个有经验的编码员，所以其他人应该随时改进这个答案。）
<script>
function switchToPanel(panel){
var index = -1;
switch (panel) {
case "preschool":
index = 0;
break;
case "kindergarten":
index = 1;
break;
case "1st":
index = 2;
break;
default:
console.warn("Cannot switch to panel " + panel);
}
jQuery('#mathAccordion').accordion({active: index});
}
jQuery().ready(function() {
if (window.location.hash) { //window.location.hash gets the anchor location out of the URL
var target = window.location.hash.replace('#', ''); //remove the #
switchToPanel(target);
}
});
</script>
Here's the corresponding HTML:
这是相应的 HTML：
<div class="accordion" id="mathAccordion">
<h1>Preschool</h1>
<div class="accordionFold">Preschool content</div>
<h1>Kindergarten</h1>
<div class="accordionFold">Kindergarten content</div>
<h1>1st Grade</h1>
<div class="accordionFold">First grade content</div>
</div>
回答by Ian Young
Hah, cracked it.
哈，破解了。
Use the php get method. However there is an error in the one above. $("#accordion").accordion("activate", '');
使用 php get 方法。但是上面的有一个错误。$("#accordion").accordion("activate", '');
the php code needs the quotation marks removed.
php 代码需要去掉引号。
Works a treat now.
现在很好用。
Cheers
干杯
Ian
伊恩
回答by jasonflaherty
This worked for me...
这对我有用...
var hash = window.location.hash;
$("#accordion").accordion("activate", hash);
回答by Aparna Dasari
This worked for me.
这对我有用。
<script>
$(function() {
$( "#accordion" ).accordion({
active: false,
collapsible: true,
heightStyle: "content",
navigation: true,
header: ".menuitem"
});
var hash = window.location.hash;
var anchor = $('a[href$="'+hash+'"]');
if (anchor.length > 0){
anchor.click();
}
});
</script>
and the html...
和 html...
<div id="accordion">
<h3 class="menuitem"><a href="#tab1">Tab1</a></h3>
<div>
More data....
</div>
</div>
回答by Trevor Bramble
With a server-side language, check the query for that #anchor and use it to fill out the activation statement.
使用服务器端语言，检查该#anchor 的查询并使用它来填写激活语句。
Extracted from something I was just working on:
从我刚刚工作的东西中提取：
$("#search_forms").accordion("activate", "{$this->open_form}");
Edit:
编辑：
I can't link directly to the accordion method blurb, but this gets you close:
我不能直接链接到手风琴方法简介，但这会让你接近：
回答by dimitris
$("a").click(function(event){
var hash = window.location.hash;
$("#accordion").accordion("activate", hash);
});
this works with jquery 1.8.3 and jqueryui 1.9.1 but didnt seem to work with jqueryui 1.10.0
这适用于 jquery 1.8.3 和 jqueryui 1.9.1 但似乎不适用于 jqueryui 1.10.0
not sure why...
不知道为什么...
