Question

我正在尝试使用JQuery（来自API的数据）制作Bootstrap手风琴结构。我几乎拥有整个结构，但我很难为内部内容添加额外的div，这会一直放在我的锚标签内。我想制作如下所示的HTML：

  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-   
      parent="#accordion2" href="#collapseTwo">
       Collapsible Group Item #2
     </a>
   </div>
   <div id="collapseTwo" class="accordion-body collapse">
     <div class="accordion-inner">
   </div>
   </div>
  </div>

我的JavaScript看起来像这样（此外我还有一个全局计数器）：

function makeAccordion(reposDatum) {
  var outerGroup = $("<div>").addClass("accordion-group");  
  var outerHeading = $("<div>").addClass("accordion-heading");
  var makeId =  "#collapse" + counter;
  var mainTitle = $("<a>").append(reposDatum.name);
  $(mainTitle).addClass("accordion-toggle").attr("data-toggle",   
   "collapse").attr("data-parent", "#accordion2").attr("href", makeId);
  var innerGroupShell = $("<div>").attr("id",  
    makeId).addClass("accordion-body").addClass("collapse").html("test");
  var innerGroupInner = $("<div>").addClass("accordion-inner");

  innerGroupShell.append(innerGroupInner);  
  mainTitle.append(innerGroupShell);
  outerHeading.append(mainTitle);
  outerGroup.append(outerHeading);

  return outerGroup;
}

我怀疑我需要使用.after或.before代替.append，但使用.before只会导致div消失。任何想法都非常赞赏。

Answer 1

<强> https://jsfiddle.net/VixedS/L18fue2y/ 当然，我在小提琴中使用了一些示例数据。

log1
log2
log3
log1
log2
log3
log4

使用JQuery制作Bootstrap手风琴

1 个答案: