Bootstrap模式 - 打開元素的奇怪位置

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

你可以試試這個：

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

DEMO HERE

Answer 3

引導都有自己的方法和事件。更好地使用它們：

$("#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。