0
我正在努力让第二层手风琴展开。有任何想法吗?嵌套Bootstrap 3手风琴不起作用
第一层展开,但内层没有。我想我可能会有太多的标记!但我找不到一个很好的例子。
见http://jsfiddle.net/pzh20/fcjq2dd0/
<div class="panel-group" id="accordion" style="width:80%; margin:0 auto;">
<div class='panel panel-primary'>
<div class='panel-heading'>
<h4 class='panel-title'><a data-toggle='collapse' data-parent='#accordion' href='#week52014'><span class='fyw'>5</span><span class='ztdate'>2014-2015</span><span class='total'>£weektotal</span></a></h4>
</div>
<div id='week52014' class='panel-collapse collapse'>
<div class='panel-body'>
<div class='panel panel-primary'>
<div class='panel-heading'>
<h4 class='panel-title'><a data-toggle='collapse' data-parent='#week52014' href='holacg52014'><span class='bu'>New Market</span><span class='ztdate'>31/08/2014</span><span class='total'>£buweektotal</span></a></h4>
</div>
<div id='holacg52014' class='panel-collapse collapse'>
<div class='panel-body'>
<div class='panel panel-primary'>
<div class='panel-heading'>
<h4 class='panel-title'><a data-toggle='collapse' data-parent='#holacg52014' href='#holacg3152014'><span class='bu'>New Market</span><span class='ztdate'>31/08/2014</span><span class='total'>£budaytotal</span></a></h4>
</div>
<div id='holacg3152014' class='panel-collapse collapse'>
<div class='panel-body'>
<p><span class='depart'>Food Retail</span><span class='total'>£143.01</span></p>
</div>
</div>
</div>
<div class='panel panel-primary'>
<div class='panel-heading'>
<h4 class='panel-title'><a data-toggle='collapse' data-parent='#holacg52014' href='#holacg3052014'><span class='bu'>New Market</span><span class='ztdate'>30/08/2014</span><span class='total'>£budaytotal</span></a></h4>
</div>
<div id='holacg3052014' class='panel-collapse collapse '>
<div class='panel-body'>
<p><span class='depart'>Paella</span><span class='total'>£436.25</span></p>
</div>
</div>
</div>
<div class='panel panel-primary'>
<div class='panel-heading'>
<h4 class='panel-title'><a data-toggle='collapse' data-parent='#holacg52014' href='#holacg2952014'><span class='bu'>New Market</span><span class='ztdate'>30/08/2014</span><span class='total'>£budaytotal</span></a></h4>
</div>
<div id='holacg2952014' class='panel-collapse collapse '>
<div class='panel-body'>
<p><span class='depart'>Food Retail</span><span class='total'>£36.60</span></p>
</div>
</div>
</div>
<div class='panel panel-primary'>
<div class='panel-heading'>
<h4 class='panel-title'><a data-toggle='collapse' data-parent='#holacg52014' href='#holacg2852014'><span class='bu'>New Market</span><span class='ztdate'>30/08/2014</span><span class='total'>£budaytotal</span></a></h4>
</div>
<div id='holacg2852014' class='panel-collapse collapse '>
<div class='panel-body'>
<p><span class='depart'>Paella</span><span class='total'>£330.42</span></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='panel panel-primary'>
<div class='panel-heading'>
<h4 class='panel-title'><a data-toggle='collapse' data-parent='#week52014' href='lmdqbm52014'><span class='bu'>Old Market</span><span class='ztdate'>31/08/2014</span><span class='total'>£buweektotal</span></a></h4>
</div>
<div id='lmdqbm52014' class='panel-collapse collapse'>
<div class='panel-body'>
<div class='panel panel-primary'>
<div class='panel-heading'>
<h4 class='panel-title'><a data-toggle='collapse' data-parent='#lmdqbm52014' href='#lmdqbm3152014'><span class='bu'>Old Market</span><span class='ztdate'>31/08/2014</span><span class='total'>£budaytotal</span></a></h4>
</div>
<div id='lmdqbm3152014' class='panel-collapse collapse'>
<div class='panel-body'>
<p><span class='depart'>Food Retail</span><span class='total'>£143.01</span></p>
</div>
</div>
</div>
<div class='panel panel-primary'>
<div class='panel-heading'>
<h4 class='panel-title'><a data-toggle='collapse' data-parent='#lmdqbm52014' href='#lmdqbm3052014'><span class='bu'>Old Market</span><span class='ztdate'>30/08/2014</span><span class='total'>£budaytotal</span></a></h4>
</div>
<div id='lmdqbm3052014' class='panel-collapse collapse '>
<div class='panel-body'>
<p><span class='depart'>Paella</span><span class='total'>£436.25</span></p>
</div>
</div>
</div>
<div class='panel panel-primary'>
<div class='panel-heading'>
<h4 class='panel-title'><a data-toggle='collapse' data-parent='#lmdqbm52014' href='#lmdqbm2952014'><span class='bu'>Old Market</span><span class='ztdate'>30/08/2014</span><span class='total'>£budaytotal</span></a></h4>
</div>
<div id='lmdqbm2952014' class='panel-collapse collapse '>
<div class='panel-body'>
<p><span class='depart'>Food Retail</span><span class='total'>£36.60</span></p>
</div>
</div>
</div>
<div class='panel panel-primary'>
<div class='panel-heading'>
<h4 class='panel-title'><a data-toggle='collapse' data-parent='#lmdqbm52014' href='#lmdqbm2852014'><span class='bu'>Old Market</span><span class='ztdate'>30/08/2014</span><span class='total'>£budaytotal</span></a></h4>
</div>
<div id='lmdqbm2852014' class='panel-collapse collapse '>
<div class='panel-body'>
<p><span class='depart'>Paella</span><span class='total'>£330.42</span></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='panel panel-primary'>
<div class='panel-heading'>
<h4 class='panel-title'><a data-toggle='collapse' data-parent='#accordion' href='#week42014'><span class='fyw'>4</span><span class='ztdate'>2014-2015</span><span class='total'>£weektotal</span></a></h4>
</div>
<div id='week42014' class='panel-collapse collapse'>
<div class='panel-body'>
<div class='panel panel-primary'>
<div class='panel-heading'>
<h4 class='panel-title'><a data-toggle='collapse' data-parent='#week42014' href='holacg42014'><span class='bu'>New Market</span><span class='ztdate'>31/08/2014</span><span class='total'>£buweektotal</span></a></h4>
</div>
<div id='holacg42014' class='panel-collapse collapse'>
<div class='panel-body'>
<div class='panel panel-primary'>
<div class='panel-heading'>
<h4 class='panel-title'><a data-toggle='collapse' data-parent='#holacg42014' href='#holacg3142014'><span class='bu'>New Market</span><span class='ztdate'>31/08/2014</span><span class='total'>£budaytotal</span></a></h4>
</div>
<div id='holacg3142014' class='panel-collapse collapse'>
<div class='panel-body'>
<p><span class='depart'>Food Retail</span><span class='total'>£143.01</span></p>
</div>
</div>
</div>
<div class='panel panel-primary'>
<div class='panel-heading'>
<h4 class='panel-title'><a data-toggle='collapse' data-parent='#holacg42014' href='#holacg3042014'><span class='bu'>New Market</span><span class='ztdate'>30/08/2014</span><span class='total'>£budaytotal</span></a></h4>
</div>
<div id='holacg3042014' class='panel-collapse collapse '>
<div class='panel-body'>
<p><span class='depart'>Paella</span><span class='total'>£436.25</span></p>
</div>
</div>
</div>
<div class='panel panel-primary'>
<div class='panel-heading'>
<h4 class='panel-title'><a data-toggle='collapse' data-parent='#holacg42014' href='#holacg2942014'><span class='bu'>New Market</span><span class='ztdate'>30/08/2014</span><span class='total'>£budaytotal</span></a></h4>
</div>
<div id='holacg2942014' class='panel-collapse collapse '>
<div class='panel-body'>
<p><span class='depart'>Food Retail</span><span class='total'>£36.60</span></p>
</div>
</div>
</div>
<div class='panel panel-primary'>
<div class='panel-heading'>
<h4 class='panel-title'><a data-toggle='collapse' data-parent='#holacg42014' href='#holacg2842014'><span class='bu'>New Market</span><span class='ztdate'>30/08/2014</span><span class='total'>£budaytotal</span></a></h4>
</div>
<div id='holacg2842014' class='panel-collapse collapse '>
<div class='panel-body'>
<p><span class='depart'>Paella</span><span class='total'>£330.42</span></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='panel panel-primary'>
<div class='panel-heading'>
<h4 class='panel-title'><a data-toggle='collapse' data-parent='#week42014' href='lmdqbm42014'><span class='bu'>Old Market</span><span class='ztdate'>31/08/2014</span><span class='total'>£buweektotal</span></a></h4>
</div>
<div id='lmdqbm42014' class='panel-collapse collapse'>
<div class='panel-body'>
<div class='panel panel-primary'>
<div class='panel-heading'>
<h4 class='panel-title'><a data-toggle='collapse' data-parent='#lmdqbm42014' href='#lmdqbm3142014'><span class='bu'>Old Market</span><span class='ztdate'>31/08/2014</span><span class='total'>£budaytotal</span></a></h4>
</div>
<div id='lmdqbm3142014' class='panel-collapse collapse'>
<div class='panel-body'>
<p><span class='depart'>Food Retail</span><span class='total'>£143.01</span></p>
</div>
</div>
</div>
<div class='panel panel-primary'>
<div class='panel-heading'>
<h4 class='panel-title'><a data-toggle='collapse' data-parent='#lmdqbm42014' href='#lmdqbm3042014'><span class='bu'>Old Market</span><span class='ztdate'>30/08/2014</span><span class='total'>£budaytotal</span></a></h4>
</div>
<div id='lmdqbm3042014' class='panel-collapse collapse '>
<div class='panel-body'>
<p><span class='depart'>Paella</span><span class='total'>£436.25</span></p>
</div>
</div>
</div>
<div class='panel panel-primary'>
<div class='panel-heading'>
<h4 class='panel-title'><a data-toggle='collapse' data-parent='#lmdqbm42014' href='#lmdqbm2942014'><span class='bu'>Old Market</span><span class='ztdate'>30/08/2014</span><span class='total'>£budaytotal</span></a></h4>
</div>
<div id='lmdqbm2942014' class='panel-collapse collapse '>
<div class='panel-body'>
<p><span class='depart'>Food Retail</span><span class='total'>£36.60</span></p>
</div>
</div>
</div>
<div class='panel panel-primary'>
<div class='panel-heading'>
<h4 class='panel-title'><a data-toggle='collapse' data-parent='#lmdqbm42014' href='#lmdqbm2842014'><span class='bu'>Old Market</span><span class='ztdate'>30/08/2014</span><span class='total'>£budaytotal</span></a></h4>
</div>
<div id='lmdqbm2842014' class='panel-collapse collapse '>
<div class='panel-body'>
<p><span class='depart'>Paella</span><span class='total'>£330.42</span></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
问候 皮特
感谢。 你有几个具有相同ID的DIV,它显然有效,但是这是为什么? 此外,在我发布的示例中,我使用Bootstrap示例中的布局。他们使用HREF值,而你不这样做。 关注 皮特 – 2014-09-30 13:52:00
此外,我需要看到第三级工作。 – 2014-10-01 11:27:55