Bootstrap Accrdion面板不起作用？

Question

我正在尝试为客户网站创建手风琴样式面板，但这是我第一次尝试设置手风琴面板，但似乎没有用。 我不确定我是否正确使用此代码。 我曾尝试使用面板作为基础架构，但没有，但似乎都无法正常工作。 有人可以解释一下如何使自举式手风琴塌陷的地方，重点放在必须建立的各种关系上。 更重要的是，我使用不正确还是忘记了一些不符合手风琴风格的东西？

HTML（很抱歉，有很多代码大声笑）：

<!-- Active Pureness START -->
<div class="row" style="margin-top: 90px;">
    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1">
        <div class="row" id="Active_Pureness_Wrapper">
            <div id="Active_Pureness_Banner">
                <img class="img-responsive" src="assets/Active_Pureness/Active_Pureness_Banner.jpg">
            </div>
            <div id="Active_Pureness_Overlay">
                <p id="Active_Pureness_Overlay_Title">Active Pureness</p>
                <button id="Active_Pureness_Button" data-toggle="collapse" data-target="#Active_Pureness_Block">Read More...</button>
            </div>
            <div id="Active_Pureness_Hidden" class="collapse">

            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1">
        <div class="row">
            <div id="Active_Pureness_Block" class="collapse">
                <!-- Active Pureness Products START -->
                <button type="button" class="btn btn-default Button_Exit pull-right" data-toggle="collapse" data-parent="#Accordian_group" data-target="#Active_Pureness_Block">
                    <span class="glyphicon glyphicon-remove"></span>
                </button>
            </div>
        </div>
    </div>
</div>
<!-- Active Pureness END -->
<!-- Hydramemory START -->
<div class="row" style="margin-top: 10px;">
    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1">
        <div class="row" id="Hydramemory_Wrapper">
            <div id="Hydramemory_Banner">
                <img class="img-responsive" src="assets/Hydramemory/Hydramemory_Banner.jpg">
            </div>
            <div id="Hydramemory_Overlay">
                <p id="Hydramemory_Overlay_Title">Hydramemory</p>
                <button id="Hydramemory_Button" data-toggle="collapse" data-target="#Hydramemory_Block">Read More...</button>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1">
        <div class="row">
            <div id="Hydramemory_Block" class="collapse">
                <!-- Hydramemory Products START -->
                <button type="button" class="btn btn-default Button_Exit pull-right" data-toggle="collapse" data-parent="#Accordian_group" data-target="#Hydramemory_Block">
                    <span class="glyphicon glyphicon-remove"></span>
                </button>
                <!-- Hydramemory Products END -->
            </div>
        </div>
    </div>
</div>
<!--Hydramemory END -->
<!-- Renight START -->
<div class="row" style="margin-top: 10px;">
    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1">
        <div class="row" id="Renight_Wrapper">
            <div id="Renight_Banner">
                <img class="img-responsive" src="assets/Renight/Reignight_Banner.jpg">
            </div>
            <div id="Renight_Overlay">
                <p id="Renight_Overlay_Title">Renight</p>
                <button id="Renight_Button" data-toggle="collapse" data-target="#Renight_Block">Read More...</button>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1">
        <div class="row">
            <div id="Renight_Block" class="collapse">
                <!-- Renight Products START -->
                <button type="button" class="btn btn-default Button_Exit pull-right" data-toggle="collapse" data-parent="#Accordian_group" data-target="#Renight_Block">
                    <span class="glyphicon glyphicon-remove"></span>
                </button>
                <!-- Renight Products END -->
            </div>
        </div>
    </div>
</div>
<!-- Renight END -->
<!-- Sacred Nature START -->
<div class="row" style="margin-top: 10px;">
    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1">
        <div class="row" id="Sacred_Nature_Wrapper">
            <div id="Sacred_Nature_Banner">
                <img class="img-responsive" src="assets/Sacred_Nature/Sacred_Nature_Banner.jpg">
            </div>
            <div id="Sacred_Nature_Overlay">
                <p id="Sacred_Nature_Overlay_Title">Sacred Nature</p>
                <button id="Sacred_Nature_Button" data-toggle="collapse" data-target="#Sacred_Nature_Block">Read More...</button>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1">
        <div class="row">
            <div id="Sacred_Nature_Block" class="collapse">
                <!-- Sacred Nature Products START -->
                <button type="button" class="btn btn-default Button_Exit pull-right" data-toggle="collapse" data-parent="#Accordian_group" data-target="#Sacred_Nature_Block">
                    <span class="glyphicon glyphicon-remove"></span>
                </button>
                <!-- Sacred Nature Products END -->
            </div>
        </div>
    </div>
</div>
<!-- Sacred Nature END -->
<!-- Sublime Skin START -->
<div class="row" style="margin-top: 10px;">
    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1">
        <div class="row" id="Sublime_Skin_Wrapper">
            <div id="Sublime_Skin_Banner">
                <img class="img-responsive" src="assets/Sublime_Skin/Sublime_Skin_banner.jpg">
            </div>
            <div id="Sublime_Skin_Overlay">
                <p id="Sublime_Skin_Overlay_Title">Sublime Skin</p>
                <button id="Sublime_Skin_Button" data-toggle="collapse" data-parent="#Accordian_group" data-target="#Sublime_Skin_Block">Read More...</button>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1">
        <div class="row">
            <div id="Sublime_Skin_Block" class="collapse">
                <!-- Sublime Skin Products START -->
                <button type="button" class="btn btn-default Button_Exit pull-right" data-toggle="collapse" data-target="#Sublime_Skin_Block">
                    <span class="glyphicon glyphicon-remove"></span>
                </button>
                <!-- Sublime Skin Products END -->
            </div>
        </div>
    </div>
</div>
<!-- Sublime Skin END -->

Answer 1

原来我手风琴面板的html结构错误。 第一个评论者发布了指向正确文档的链接。