Bootstrap аккордеон прыгает при расширении

Question

Я использую фрагмент для загрузки внешних divs в элементы аккордеона Bootstrap. Первоначально div были загружены при загрузке страницы, но затем я изменил код так, чтобы они загружались при нажатии кнопки.

Я использовал два разных фрагмента, чтобы это произошло, и они оба приводят к довольно резкому переходу элементов аккордеона при расширении. Однако этого не произошло, когда divs, загруженные на загрузку страницы.

Я искал решение этой проблемы, я пробовал много вещей, которые работали для других людей (например, нулевой запас и отступы или охватывающие как кнопку, так и панель-кузов внутри 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); 

(OLD 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

См рабочего образец here

я использовал setTimeout() поддельный вызов AJAX, так что вам нужно обновить эта часть, но кроме этого, все есть.