时间戳

首页 > 解决方案 > 通过 Javascript 创建手风琴

javascript - 通过 Javascript 创建手风琴

问题描述

我正在使用 Javascript，没有 jQuery。

到目前为止，我已经在手风琴标题面板上这样做了：

var accordion = document.createElement('div');
            accordion.className = 'panel-group';
            accordion.id = 'accordion';
            document.getElementById('navgroupsframe').appendChild(accordion);

            var panel = document.createElement('div');
            panel.className = 'panel';
            panel.style.marginLeft = '-15px';
            accordion.appendChild(panel);

            var panelheading = document.createElement('div');
            panelheading.className = 'panel-heading';
            panel.appendChild(panelheading);

            var paneltitle = document.createElement('div');
            paneltitle.className = 'vgroupholder panel-title'

但是，我想到达这里：

<div class="panel-group" id="accordion">
                            <div class="panel" style="margin-left: -15px;">
                            <div class="panel-heading">
                                <div class="vgroupholder panel-title" data-parent="#accordion" data-toggle="collapse" href="#title1" onclick="removevBgs();">

我该怎么做呢？（添加data-parent等，仅使用 Javascript，不使用 jQuery）。

谢谢。

标签： javascriptbootstrap-4accordion

解决方案

您可能会考虑创建父元素，然后将所有其余元素注入一个很好的旧元素，innerHTML因为您没有使用 JQuery :)

var accordion = document.createElement('div');
accordion.className = 'panel-group';
accordion.id = 'accordion';

accordion.innerHTML = `<div class="panel" style="margin-left: -15px;">
                            <div class="panel-heading">
                                <div class="vgroupholder panel-title" data-parent="#accordion" data-toggle="collapse" href="#title1" onclick="removevBgs();"></div>
                             </div>
                       </div>`;

document.getElementById('navgroupsframe').appendChild(accordion);

推荐阅读