- 首页
- 其他开发
- 从另一个页面打开 bootstrap 3 手风琴面板
从另一个页面打开 bootstrap 3 手风琴面板
[英] Open bootstrap 3 accordion panel from another page
本文介绍了从另一个页面打开 bootstrap 3 手风琴面板的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是我的手风琴代码:
<div class="panel panel-default"><div class="panel-heading" role="tab" id="headingOne"><h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">可折叠组项目 #1</a>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"><div class="panel-body" id="myPanelContent">手风琴面板 1 内容
<div class="panel panel-default"><div class="panel-heading" role="tab" id="headingTwo"><h4 class="panel-title"><a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">可折叠组项目 #2</a>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"><div class="panel-body">手风琴面板 2 内容
我想要一个来自另一个页面的链接来打开第一面板 (#myPanelContent) 并显示内容.链接示例:
<a href="mynewpage.html#myPanelContent">转到面板 1 内容</a>
事实是我使用了 stackoverflow 中的一些解决方案但没有奏效.详细解释如何使用代码将不胜感激，因为我是 javascript 新手.
提前致谢.
解决方案
我会添加一个答案来回复我的评论.
您需要检查 URL 中是否存在哈希值，如果存在则显示手风琴面板，您可以像这样完成此操作:
$(function(){//检查 url 中是否有哈希值if ( window.location.hash != '' ){//删除任何显示的手风琴面板(它们有一个in"类)$('.collapse').removeClass('in');//现在显示基于散列的面板:$(window.location.hash + '.collapse').collapse('show');}});
此代码当然使用 jQuery，但如果您使用的是引导程序的手风琴，我想您已经在使用它了吗?
here is my accordion code:
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body" id="myPanelContent">
Accordion Panel 1 Content
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
Accordion Panel 2 Content
</div>
</div>
</div>
</div>
I want a link from another page to open the No 1 panel (#myPanelContent) and show the content.
Link example:
<a href="mynewpage.html#myPanelContent">Go to Panel 1 content</a>
The true is that i used some solutions from stackoverflow but not worked. A detailed explain how to use the code will be much appreciated as I am novice in javascript.
Thanks in advance.
解决方案
I'll add an answer in reply to my comment.
you need to check if there is a hash present in the URL, if so then show the accordion panel, you can accomplish this likes so:
$(function(){
// check if there is a hash in the url
if ( window.location.hash != '' )
{
// remove any accordion panels that are showing (they have a class of 'in')
$('.collapse').removeClass('in');
// show the panel based on the hash now:
$(window.location.hash + '.collapse').collapse('show');
}
});
This code uses jQuery of course, but i'd imagine you are using that already if you are using bootstrap's accordion?
这篇关于从另一个页面打开 bootstrap 3 手风琴面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
