[英]Bootstrap accordion jumps when expanding
I am using a snippet to load external divs to Bootstrap accordion items. 我正在使用一个片段将外部div加载到Bootstrap手风琴项目中。 Initially, the divs were loaded on page load, but then I modified the code so that they would load on button click. 最初,div是在页面加载时加载的,但是后来我修改了代码,以便在单击按钮时加载它们。
I have used two different snippets to make this happen, and they both result in a rather jumpy transition of the accordion items when expanding. 我使用了两个不同的片段来实现此目的,并且它们在扩展时都导致手风琴项的过渡相当突然。 However, this didn't happen when the divs where loaded on page load. 但是,当在页面上加载div时,这不会发生。
I have searched for a solution to this problem, I have tried many things that worked for other people (such as zero margin and padding or enclosing both the button and the panel-body inside a div), but none of them worked in this case. 我一直在寻找解决此问题的方法,我尝试了许多对其他人有用的方法(例如零边距和填充或将按钮和面板主体都封装在div内),但是在这种情况下,它们都无效。
If you have any suggestions, please tell me. 如果您有任何建议,请告诉我。 Thank you in advance 先感谢您
HTML 的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 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: (旧JS:
$(document).ready(function(){
$('#accordion').click(function(){
$('#first').load('/path/to.html #firstdiv');
});
})
) )
You should expand accordion item once received response for the ajax call. 一旦收到ajax调用的响应,您应该扩展手风琴项目。 So remove data-toggle="collapse" href="#collapseOne"
attributes from your link and call $('#collapseOne').collapse()
in callback function, like this: 因此,从链接中删除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);
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.