Bootstrap手風琴在擴展時會跳

Question

我正在使用一個片段將外部div加載到Bootstrap手風琴項目中。 最初，div是在頁面加載時加載的，但是后來我修改了代碼，以便在單擊按鈕時加載它們。

我使用了兩個不同的片段來實現此目的，並且它們在擴展時都導致手風琴項的過渡相當突然。 但是，當在頁面上加載div時，這不會發生。

我一直在尋找解決此問題的方法，我嘗試了許多對其他人有用的方法（例如零邊距和填充或將按鈕和面板主體都封裝在div內），但是在這種情況下，它們都無效。

如果您有任何建議，請告訴我。 先感謝您

的HTML

  <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="headingOne">
        <h4 class="panel-title">
          <a data-href="/path/to.html #firstdiv" class="ajax-link" data-ajaxtarget="#first" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
            Read more
          </a>
         </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
         <div class="panel-body" id="first"></div>
        </div>
      </div>
     </div>

JS / jQuery

(function($){
$(document).ready(function(){
ajaxLink(); 
linkPreventDefault();  
});

function ajaxLink(){
$("a.ajax-link").on('click', function(event){     
  var thisLink = $(this);
  var targetUrl = thisLink.attr("data-href");
  var target = thisLink.data('ajaxtarget');
  console.log("loading via ajax: "+ targetUrl + ",in div: "+ target);

  $(target).load( targetUrl, function( response, status, xhr ) {
      if ( status == "error" ) {
        var msg = "Sorry but there was an error: ";
        console.error (msg + xhr.status + " " + xhr.statusText );
      }else if(status="success"){
        console.log("successfully loaded");
        //OPTIONAL: unbind the links click event and bind a new one
        noMoreAjax(thisLink);          
    }
  });
  event.preventDefault();   
});
}

function linkPreventDefault(){
$('a.link-prevent').click(function(event){
  console.log
  event.preventDefault();
});
}

function noMoreAjax(item){    
var linkItem = $(item);
console.log("No more Ajax for this link");
linkItem.removeClass('ajax-link');
linkItem.addClass('link-prevent');
linkItem.unbind('click');
$(linkItem).click(function(event){
  console.log("Preventing after ajax");
  event.preventDefault();
});
}

})(jQuery); 

（舊JS：

$(document).ready(function(){
$('#accordion').click(function(){
    $('#first').load('/path/to.html #firstdiv');
});
})

）

Answer 1

一旦收到ajax調用的響應，您應該擴展手風琴項目。 因此，從鏈接中刪除data-toggle="collapse" href="#collapseOne"屬性，然后在回調函數中調用$('#collapseOne').collapse() ，如下所示：

 $(target).load( targetUrl, function( response, status, xhr ) {
      if ( status == "error" ) {
        var msg = "Sorry but there was an error: ";
        console.error (msg + xhr.status + " " + xhr.statusText );
      }else if(status="success"){
        $('#collapseOne').collapse();
        console.log("successfully loaded");
        //OPTIONAL: unbind the links click event and bind a new one
        noMoreAjax(thisLink);          
    }
  }); 

Answer 2

在這里查看工作示例

我已經使用setTimeout()來偽造ajax調用，因此您需要更新該部分，但是除此之外，所有內容都已存在。