使用Bootstrap 3链接到嵌套的手风琴 [英] Linking to a nested accordion using Bootstrap 3
问题描述
我有一个嵌套式手风琴，我想要它做的是在一个嵌套式手风琴内部有一个链接打开一个不同的嵌套式手风琴。现在，我可以从Nested Accordion 2.1获得一个链接，以打开嵌套式手风琴1.1的内容。但是，它没有打开Accordion 1，所以看起来链接什么也不做。当您手动打开Accordion 1时，您可以看到嵌套的Accordion 1.1已经打开。
这是我的HTML 代码：
< div class =panel-group id =accordion>
< div class =panel panel-default>
< div class =panel-heading>
< h4 class =panel-title>
< a data-toggle =collapsedata-parent =＃accordionhref =＃accordion1> Accordion 1< / a>
< / h4>
< / div>
< div id =accordion1class =panel-collapse collapse>
< div class =panel-body>
< div class =panel-groupid =nested-accordion1>
< div class =panel panel-default>
< div class =panel-heading>
< h4 class =panel-title>
< a data-toggle =collapsedata-parent =＃nested-accordion1href =＃accordion1-1>嵌套式Accordion 1.1< / a>
< / h4>
< / div>
< div id =accordion1-1class =panel-collapse collapse>
< div class =panel-body>
< p>说明< / p>
< / div>
< / div>
< / div>
< div class =panel panel-default>
< div class =panel-heading>
< h4 class =panel-title>
< a data-toggle =collapsedata-parent =＃nested-accordion1href =＃accordion1-2>嵌套式Accordion 1.2< / a>
< / h4>
< / div>
< div id =accordion1-2class =panel-collapse collapse>
< div class =panel-body>
< p>说明< / p>
< / div>
< / div>
< / div>
< / div>
< / div>
< / div>
< / div>
< div class =panel panel-default>
< div class =panel-heading>
< h4 class =panel-title>
< a data-toggle =collapsedata-parent =＃accordionhref =＃accordion2> Accordion 2< / a>
< / h4>
< / div>
< div id =accordion2class =panel-collapse collapse>
< div class =panel-body>
< p>说明< / p>
< div class =panel-groupid =nested-accordion2>
< div class =panel panel-default>
< div class =panel-heading>
< h4 class =panel-title>
< a data-toggle =collapsedata-parent =＃nested-accordion2href =＃accordion2-1>嵌套式Accordion 2.1< / a>
< / h4>
< / div>
< div id =accordion2-1class =panel-collapse collapse>
< div class =panel-body>
< a href =＃data-toggle =collapsedata-target =＃accordion1-1>连结至Nested Accordion 1.1< / a>
< / div>
< / div>
< / div>
< / div>
< / div>
< / div>
< / div>
< / div>
有什么建议可以解决这个问题？我目前没有使用任何自定义的JQuery（只是Bootstrap的东西），我觉得添加一些JQuery到这个是有用的，但我不知道从哪里开始。
尝试将以下JavaScript添加到您的项目中。
//仅在DOM [准备就绪]时运行此块内的代码] [1]
$（document）.ready（function（）{
// create event listen on accordion2-1's click event，[jQuery] [2]
$ （'＃accordion2-1'）。on（'click'，function（evt，el）{
//找到accordion1并切换这个元素
//collapse方法是从（'toggle'）;
}）;
}）;
First of all, I'm new here so please be patient with me.
I have a nested accordion, and what I would like for it to do is have one link inside one nested accordion to open a different nested accordion. Right now, I am able to get a link from Nested Accordion 2.1 to open the contents of Nested Accordion 1.1. However, it doesn't open Accordion 1, so it looks like the link does nothing. When you manually open Accordion 1, you can see that Nested Accordion 1.1 is already opened.
Here's my HTML code:
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#accordion1">Accordion 1</a>
</h4>
</div>
<div id="accordion1" class="panel-collapse collapse">
<div class="panel-body">
<div class="panel-group" id="nested-accordion1">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#nested-accordion1" href="#accordion1-1">Nested Accordion 1.1</a>
</h4>
</div>
<div id="accordion1-1" class="panel-collapse collapse">
<div class="panel-body">
<p>Description</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#nested-accordion1" href="#accordion1-2">Nested Accordion 1.2</a>
</h4>
</div>
<div id="accordion1-2" class="panel-collapse collapse">
<div class="panel-body">
<p>Description</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#accordion2">Accordion 2</a>
</h4>
</div>
<div id="accordion2" class="panel-collapse collapse">
<div class="panel-body">
<p>Description</p>
<div class="panel-group" id="nested-accordion2">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#nested-accordion2" href="#accordion2-1">Nested Accordion 2.1</a>
</h4>
</div>
<div id="accordion2-1" class="panel-collapse collapse">
<div class="panel-body">
<a href="#" data-toggle="collapse" data-target="#accordion1-1">Link to Nested Accordion 1.1</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Any suggestions for what I can do to solve this? I'm currently not using any customized JQuery (just the Bootstrap stuff), and I feel like it would be useful to add some JQuery to this but I'm not sure where to start.
Try adding the following javascript to your project. I left comments in the code to describe what's happening.
// run the code inside this block only when the DOM is [ready][1]
$(document).ready(function(){
// create event listen on accordion2-1's click event, [jQuery][2]
$('#accordion2-1').on('click', function(evt, el){
// find accordion1 and toggle this element
// "collapse" method is from [bootstrap][1]
$('#accordion1').collapse('toggle');
});
});
这篇关于使用Bootstrap 3链接到嵌套的手风琴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
