將外部內容加載到div並打開手風琴

Question

我試圖瞭解如何將外部內容加載到div中，然後打開手風琴並導航到其中的內容。

我使用jQuery的下面上的點擊事件HTML內容加載到id爲「ACD」一div：

$("#customers").click(function() { 
     $('#acd').load('includes/customers.html'); 
}); 

在customers.html客戶有兩個手風琴，其中第一手風琴（collapseOne）按照collapse的定義摺疊，第二個（collapseTwo）按照collapse in的定義進行擴展。這是基本結構：

<div id="accordion" role="tablist"> 
<div> 
    <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 
    Accordion One 
    </a> 
</div> 
<div id="collapseOne" class="collapse" role="tabpanel"> 
    <div> 
    <p>Accordion One Content</p> 
    </div> 
</div> 
<div> 
    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> 
    Accordion Two 
    </a> 
</div> 
<div id="collapseTwo" class="collapse in" role="tabpanel"> 
    <div> 
    <p>Accordion Two Content</p> 
    </div> 
</div> 
</div> 

基本技能我一直如此，這兩種加載外部內容#collapseOne並打開手風琴修改的JavaScript，但它仍然崩潰。我認爲customers.html需要在手風琴可以擴展之前完全加載，但不確定如何處理。

$('#customers').click(function() { 
    $('#acd').load('includes/customers.html#collapseOne').collapse("show"); 
}); 

Answer 1

我不確定這是不是你要找的。

下面是我的例子。

HTML

Just assume that the textarea below is external page 
<div class="row"> 
<div class="col-sm-4"><textarea class="form-control text t1">This is 1st html result</textarea></div> 
<div class="col-sm-4"><textarea class="form-control text t2">This is 2nd html result</textarea></div> 
<div class="col-sm-4"><textarea class="form-control text t3">This is 3rd html result</textarea></div> 
</div> 
<br/> 
<button class="btn btn-sm btn-warning test"> 
Click Me! 
</button> 
@ Change and trigger click : 
<button class="btn btn-sm btn-primary bt" data-page="t1" data-target="collapseOne"> 
Item #1 
</button> 
<button class="btn btn-sm btn-primary bt" data-page="t2" data-target="collapseTwo"> 
Item #2 
</button> 
<button class="btn btn-sm btn-primary bt" data-page="t3" data-target="collapseThree"> 
Item #3 
</button> 
<br/> 
<br/> 
<div id="accordion" role="tablist" aria-multiselectable="true"> 
    <div class="card"> 
    <div class="card-header" role="tab" id="headingOne"> 
     <h5 class="mb-0"> 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
      Collapsible Group Item #1 
     </a> 
     </h5> 
    </div> 

    <div id="collapseOne" class="collapse active" role="tabpanel" aria-labelledby="headingOne"> 
     <div class="card-block"> 
     Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
     </div> 
    </div> 
    </div> 
    <div class="card"> 
    <div class="card-header" role="tab" id="headingTwo"> 
     <h5 class="mb-0"> 
     <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 
      Collapsible Group Item #2 
     </a> 
     </h5> 
    </div> 
    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo"> 
     <div class="card-block"> 
     Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
     </div> 
    </div> 
    </div> 
    <div class="card"> 
    <div class="card-header" role="tab" id="headingThree"> 
     <h5 class="mb-0"> 
     <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> 
      Collapsible Group Item #3 
     </a> 
     </h5> 
    </div> 
    <div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree"> 
     <div class="card-block"> 
     Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
     </div> 
    </div> 
    </div> 
</div> 

JAVASCRIPT

$('.test').on('click',function(){ 

    var t1 = $(".t1").val(); // page 1 
    var t2 = $(".t2").val(); // page 2 
    var t3 = $(".t3").val(); // page 3 

    /* 
    change the html function to load @ ajax request 
    */ 

    $("#collapseOne > div").html(t1); 
    $("#collapseTwo > div").html(t2); 
    $("#collapseThree > div").html(t3); 

}); 

$('.bt').on('click',function(){ 

    var dt = $(this).data("target"); 
    var pg = $(this).data("page"); 
    // var rs = $("." + pg).prop("value"); @ 
    var rs = $("." + pg).val(); 

    /* 
    change the html function to load @ ajax request 
    if you're using another version of bootstrap, please change 'active' to 'in' 
    */ 

    $("#accordion").find("div.active").removeClass("active"); 
    $("#" + dt).addClass("active"); 
    $("#" + dt + " > div").html(rs); 

}); 

和工作活生生的例子：https://jsfiddle.net/synz/2ba5k6j3/

我希望這個例子可以幫助你。