Question

我正在使用一个片段将外部div加载到Bootstrap手风琴项目。最初，div在页面加载时被加载，但后来我修改了代码，以便在按钮点击时加载它们。

我使用了两个不同的片段来实现这一点，并且它们都会在扩展时导致手风琴项目的相当急剧的过渡。但是，当加载页面加载的div时，这并没有发生。

我已经找到了解决这个问题的方法，我已经尝试过很多适用于其他人的东西（例如零边距和填充或将div和panel-body都包含在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调用的响应，你应该扩展accordion项目。因此，请从链接中删除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电话，因此您需要更新该部分，但除此之外，一切都在那里。

Bootstrap手风琴在扩展时会跳跃

2 个答案: