[英]Linking to a section of an Accordion from another page
I'm using twitter-Bootstrap 2.04, and I'm using the latest jQuery. 我正在使用twitter-Bootstrap 2.04,而我正在使用最新的jQuery。 I'm trying to make a link that will go from one page to the page containing this accordion, and then activate the appropriate accordion section. 我正在尝试建立一个从一个页面到包含此手风琴的页面的链接,然后激活相应的手风琴部分。 This is the accordion: 这是手风琴:
<div class="accordion-group">
<div class="accordion-heading">
<a name="Alink1" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
<strong>Title</strong>
</a>
</div>
<div id="collapseOne" class="accordion-body in collapse" style="height: auto; ">
<div class="accordion-inner">
some random content
<div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a name="Alink2" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
<strong>Title 2</strong>
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse" style="height: 0px; ">
<div class="accordion-inner">
some random content 2
<div>
</div>
</div>
This is the link: 这是链接:
<a href="page.html/#Alink2">Link to some interesting stuff</a>
With linking to just a bit in the page works fine usually, do I need to use Javascript to activate it? 通过链接到页面中的一点点工作通常很好,我需要使用Javascript来激活它吗?
Yes, you will need to manually activate it on page load. 是的,您需要在页面加载时手动激活它。 Something like the following should work: 像下面这样的东西应该工作:
$(document).ready(function () {
location.hash && $(location.hash + '.collapse').collapse('show');
});
Also, as @SaadImran pointed out, this assumes that you link to the collapsible element id (eg., #collapseTwo
) rather than the name in the anchor (eg., #Alink2
). 此外,正如@SaadImran所指出的,这假设您链接到可折叠元素id(例如, #collapseTwo
)而不是锚点中的名称(例如, #Alink2
)。
Thanks for your help. 谢谢你的帮助。
I added functionality so that the code can open Accordions WITHIN Accordions: 我添加了功能,以便代码可以打开Accordions WITHIN Accordions:
$(document).ready(function () {
if (location.hash){
$(location.hash).collapse('show');
$(location.hash).parents('.accordion-body').collapse('show');
}
});
You can use the position of the accordion section. 您可以使用手风琴部分的位置。 The following link opens the third accordion section on a twitter bootstrap (wordpress) accordion. 以下链接打开twitter bootstrap(wordpress)手风琴上的第三个手风琴部分。
Link Example: http://www.zfp-bauwesen.de/leistungen/ubersicht#3 链接示例: http : //www.zfp-bauwesen.de/leistungen/ubersicht#3
Javscript Code: Javscript代码:
$( document ).ready(function() {
if (window.location.hash) {
var AccordionSectionNumber = window.location.hash.substring(1);
AccordionBodyID = $(".accordion .accordion-group:nth-of-type(" + AccordionSectionNumber + ") .accordion-heading a").attr('href')
if (! (typeof AccordionBodyID === "undefined")) {
$(AccordionBodyID).collapse('show');
return true;
}
}
});
你试过这个:
<a href="page.html#Alink2">Link to some interesting stuff</a>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.