モーダル ダイアログ内で折りたたみを使用しようとしています。私のページでは、モーダルと折りたたみの外側に、モーダル ダイアログと折りたたみの特定のセクションを開くために、リッスンするリンクをいくつか配置したいと考えています。各コンポーネントは、組み合わせて使用しない場合でもうまく機能するようです。ドキュメントのマークアップを使用し、折りたたみをモーダルに組み合わせたjsfiddleを次に示します。特定の折りたたみをトリガーして開くまで、折りたたみの機能は壊れません。
マークアップ:
<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
<!-- Button to trigger modal -->
<a id="showCollapseOne" href="#myModal" role="button" class="btn">show collapseOne</a>
<!-- Button to trigger modal -->
<a id="showCollapseTwo" href="#myModal" role="button" class="btn">show collapseTwo</a>
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>
<!-- ACCORDION -->
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
Anim pariatur cliche...
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
Collapsible Group Item #2
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
Anim pariatur cliche...
</div>
</div>
</div>
</div>
<!-- END ACCORDION -->
</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
JS:
$('#showCollapseOne').on('click', function(){
$('#myModal').modal('show');
$('#collapseOne').collapse({toggle: true, parent: '#accordion2'});
});
$('#showCollapseTwo').on('click', function(){
$('#myModal').modal('show');
$('#collapseTwo').collapse({toggle: true, parent: '#accordion2'});
});
これを機能させる方法はありますか?