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