1

我正在尝试在模态对话框中使用折叠。在我的页面上，在模态和折叠之外，我想放置一些我听的链接，以便打开模态对话框和折叠的某个部分。当不结合使用时，每个组件似乎都可以很好地工作。这是一个使用文档中的标记的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'});
});

任何想法如何让这个工作？

4

0 回答 0