Twitter bootstrap 自举手风琴

至少在过去的两个小时里，我一直在努力让手风琴开机

我选择了一个基本的例子，手风琴可以完美地工作，下面是它在JSFIDLE上的例子：

工作版本的源代码：

<div class="uk-container uk-container-center">
    <div class="panel-group" id="accordion222">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion222" href="#collapse1">
                        Collapsible Group 1</a>
                </h4>
            </div>
            <div id="collapse1" class="panel-collapse collapse">
                <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
                    minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                    commodo consequat.</div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion222" href="#collapse2">
                        Collapsible Group 2</a>
                </h4>
            </div>
            <div id="collapse2" class="panel-collapse collapse">
                <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
                    minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                    commodo consequat.</div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion222" href="#collapse3">
                        Collapsible Group 3</a>
                </h4>
            </div>
            <div id="collapse3" class="panel-collapse collapse">
                <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
                    minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                    commodo consequat.</div>
            </div>
        </div>
    </div>

Lorem ipsum dolor sit amet，奉献精英，
这是临时性的劳动和就业机会。乌特埃尼姆酒店
最低成本、最低成本、最低成本和最低成本
康多康塞卡特。
Lorem ipsum dolor sit amet，奉献精英，
这是临时性的劳动和就业机会。乌特埃尼姆酒店
最低成本、最低成本、最低成本和最低成本
康多康塞卡特。
Lorem ipsum dolor sit amet，奉献精英，
这是临时性的劳动和就业机会。乌特埃尼姆酒店
最低成本、最低成本、最低成本和最低成本
康多康塞卡特。

这是我的例子，它不起作用。我不知道我错过了什么

我的版本不起作用：

<div class="panel-group uk-row-first" id="accordion222">
    <div class="panel-group">
        <div class="panel panel-default">
            <div class="panel-heading main">
                <h4 class="panel-title">
                    <a href="#collapse1" class="panel-toggle collapsed" data-parent="#accordion222" data-body-background="background1.jpg" data-toggle="collapse"> Willkommen </a>
                </h4>
            </div>
            <div id="collapse1" class="panel-body panel-collapse collapse">
                <div class="panel-inner main">
                    <p class="uk-article-lead"><span>Test test test</span>               </p>
                </div>
            </div>
        </div>
    </div>    
    <div class="panel-group">
        <div class="panel panel-default">
            <div class="panel-heading main">
                <h4 class="panel-title"><a href="#collapse6" class="panel-toggle collapsed" data-parent="#accordion222" data-body-background="background6.jpg" data-toggle="collapse"> Kontakt </a></h4>
            </div>
            <div id="collapse6" class="panel-body panel-collapse collapse ">
                <div class="panel-inner main">
                    <div class="uk-grid uk-grid-width-medium-1-2">
                        <p> Idem za kanadu! </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

测试

伊德姆扎卡纳杜

正如你在我的例子中看到的，手风琴不起作用。我希望打开一个新项目会像第一个示例中那样关闭当前打开的项目。 任何形式的帮助都将不胜感激。

看看这个

您需要做的唯一一件事是从内部

div

中删除id，并将其设置为父容器id

<div class="uk-container uk-container-center" id="accordion222">
...
</div>

...

测试

伊德姆扎卡纳杜

为了你的手风琴 您错过了组id，并且还为每个手风琴使用了单独的组。

---

将这些手风琴合并成一组

对我来说，它起作用了吗？唯一的区别是，打开一个新的将关闭已经打开的。你想摆脱它吗？@Aer0是的，这就是重点。这就是手风琴的重点。谢谢。就这样。在本例中，是否可以使用嵌套手风琴？

<div class="panel-group uk-row-first" id="accordion222">
    <div class="panel-group" id="accordion222">
        <div class="panel panel-default">
            <div class="panel-heading main">
                <h4 class="panel-title">
                    <a href="#collapse1" class="panel-toggle collapsed" data-parent="#accordion222" data-body-background="background1.jpg" data-toggle="collapse"> Willkommen </a>
                </h4>
            </div>
            <div id="collapse1" class="panel-body panel-collapse collapse">
                <div class="panel-inner main">
                    <p class="uk-article-lead"><span>Test test test</span>               </p>
                </div>
            </div>
        </div>

          <div class="panel panel-default">
            <div class="panel-heading main">
                <h4 class="panel-title"><a href="#collapse6" class="panel-toggle collapsed" data-parent="#accordion222" data-body-background="background6.jpg" data-toggle="collapse"> Kontakt </a></h4>
            </div>
            <div id="collapse6" class="panel-body panel-collapse collapse ">
                <div class="panel-inner main">
                    <div class="uk-grid uk-grid-width-medium-1-2">
                        <p> Idem za kanadu! </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>