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>

使用基本技能我试图修改javascript，以便它将外部内容加载到#collapseOne并打开手风琴，但它仍然崩溃。我认为在手风琴扩展之前，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/

我希望这个例子可以帮助你。

将外部内容加载到div并打开手风琴

1 个答案: