我正在尝试为客户网站创建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 -->
答案 0 :(得分:0)
结果是手风琴面板的html结构错误。第一位评论者发布了指向正确文档的链接。