Bootstrap Accrdion面板不工作?

时间:2017-09-26 05:55:34

标签: html twitter-bootstrap

我正在尝试为客户网站创建Accordion样式面板,但这是我第一次尝试设置手风琴面板而且似乎没有用。我不确定我是否正确使用此代码。我曾尝试使用面板作为基础设施而没有,但似乎都没有工作。有人可以解释如何制作自举手风琴折叠区域,重点是必须具备的关系类型。更重要的是,我使用不正确还是忘记了手风琴的风格?

HTML(提前抱歉。有很多代码lol):     

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

1 个答案:

答案 0 :(得分:0)

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