[英]Making Bootstrap Accordion with JQuery
I am attempting to make a Bootstrap accordion structure using JQuery (with data from an API). 我正在尝试使用JQuery(使用来自API的数据)制作Bootstrap手风琴结构。 I nearly have the whole structure but am having a hard time adding an extra div for the inner content, which keeps getting placed inside of my anchor tag.
我几乎拥有整个结构,但我很难为内部内容添加额外的div,这会一直放在我的锚标签内。 I would like to make HTML that looks like the following:
我想制作如下所示的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>
My JavaScript
looks like so (in addition I have a global counter): 我的
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;
}
I suspect that I need to use .after
or .before
instead of .append
but using .before
just caused the div to disappear. 我怀疑我需要使用
.after
或.before
,而不是.append
但使用.before
只是造成股利消失。 Any ideas much appreciated. 任何想法都非常感激。
https://jsfiddle.net/VixedS/L18fue2y/ Of course I've used some example data in the fiddle. https://jsfiddle.net/VixedS/L18fue2y/当然,我在小提琴中使用了一些示例数据。
function makeAccordion(reposDatum){
counter++;
$('.accordion-group').append(''+
'<div class="accordion-heading">'+
'<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion'+(counter-1)+'" href="#collapse'+counter+'">'+
reposDatum.name+
'</a>'+
'</div>'+
'<div id="collapse'+counter+'" class="accordion-body collapse">'+
'<div class="accordion-inner"></div>'+
'</div>');
}
There was a slight mistake in the code. 代码中有一个小错误。 the place where the text was added.
添加文本的位置。 just changed the location of the
只是改变了的位置
*.html("test")*
Please check the code below: 请检查以下代码:
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");
var innerGroupInner = $("<div>").addClass("accordion-inner").html("test");
innerGroupShell.append(innerGroupInner);
mainTitle.append(innerGroupShell);
outerHeading.append(mainTitle);
outerGroup.append(outerHeading);
return outerGroup;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.