Bootstrap手风琴

Question

至少持续两个小时我正试图让bootstrap手风琴工作。

我选择一个基本的例子，其中手风琴完美地工作，这是在jsfiddle：

jsFiddle version which work

工作版本的源代码：

<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>

这是我的例子，它不起作用。我找不到我想念的东西。

jsFiddle which doesn't work

我的版本不起作用：

<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>

正如您在我的示例中所看到的，手风琴不起作用。我希望打开一个新项目当前打开，如第一个示例中所示。 任何形式的帮助将不胜感激。

Answer 1

<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>

为你的手风琴 你错过了团体ID，你也为每支手风琴使用个人团体。 将这些手风琴合并为一个组

Answer 2

看看这个fiddle。

您唯一需要做的就是从内部div中删除ID并将其设置为父容器ID。

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