Question

我有一个解决我的问题的JSFiddle，link here。

打开模态
点击雪佛龙
关闭模式
再次打开模式

现在你看到无序列表有点奇怪了。

HTML：

<button type="button" class="btn btn-info btn-lg" id="testBtn" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                 <h4 class="modal-title">Modal Header</h4>

            </div>
            <div class="modal-body">
                 <h4 id="test-h4"><strong>My header</strong> <i class="glyphicon glyphicon-chevron-down" data-toggle="collapse" data-target="#test-ul"></i></h4>

                <ul class="list-group collapse" id="test-ul">
                    <li class="list-group-item">
                        <p>Maecenas quis libero turpis. Praesent accumsan suscipit ex, a viverra risus consectetur non. Suspendisse et elit viverra, cursus mauris eget, condimentum ante. Vivamus et libero odio. Nunc a urna mattis, vestibulum urna eu, aliquet nulla. Maecenas sit amet metus pulvinar velit cursus aliquet at non diam. In pretium, sem nec faucibus ullamcorper, arcu nibh semper turpis, quis pulvinar risus libero in enim. Suspendisse ultrices posuere pulvinar.</p>
                    </li>
                </ul>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

的JavaScript ：

$('.glyphicon-chevron-down').click(function () {
    $(this).toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
});

$("#testBtn").click(function () {
    $("#test-ul").addClass('in');
    $("#test-h4").find('i').removeClass('glyphicon-chevron-down');
    $("#test-h4").find('i').addClass('glyphicon-chevron-up');
});

我已经删除了所有不必要的代码，这才是最重要的。

注意：当我点击打开时，我想要打开里面的元素模态

感谢。

Answer 1

试试这个：

  $('#testBtn').on('click', function() {
        $('#test-ul').collapse('show');
  });

Answer 2

你可以尝试这个：

fprintf

DEMO HERE

Answer 3

Bootstrap有自己的方法和事件。最好用它们：

$("#myModal").on("show.bs.modal",function(e){ //<-- event fired when the modal is shown
    $("#test-ul").collapse("show");  //<-- show the collapsible with method
    $("#test-h4").find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');   
});

每次打开模态时都会触发。

FIDDLE

查看documentation。

Bootstrap模态 - 打开元素的奇怪位置

3 个答案: