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

Bootstrap modal - strange placement of opened element

本文关键字：位置 元素 模态 Bootstrap      更新时间：2023-09-26

我有一个JSFiddle来解决我的问题，链接到这里。

  • 打开模态
  • 单击V形
  • 关闭模态
  • 再次打开模态

现在您看到无序列表的位置有些奇怪。

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');
});

我去掉了所有不必要的代码，这才是最重要的。

注意：我希望在单击打开时打开里面的元素模态

谢谢。

试试这个：

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

你可以试试这个：

$('.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');
    return:false;
    display:block;
});

此处演示

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');   
});

这将在每次打开模态时激发。

小提琴

请查看文档。

相关文章：