Bootstrap 手风琴切换在第一次页面加载时错误地加载内容符号 (+/-)
Bootstrap accordion-toggle loads the content symbol(+/-) wrongly on first time page load
您好,我在 visualforce 页面上使用了以下手风琴切换代码。可折叠切换工作正常,但第一次加载页面时除外。在 pageload/Refresh 上,折叠面板显示时带有符号“-”,而不是预期的内容“+”。有人可以帮我吗?
Visualforce 页面代码:
<a hef="#" class="accordion-toggle" data-target="#collapse1" data-toggle="collapse"> Data Panel 1 </a>
<div id="collapse1" class="panel-collapse collapse">
<ul style="list-style-type:none">
<li> <a hef="#" class="accordion-toggle" data-target="#collapse9" data-toggle="collapse"> Data Panel 2</a>
<div id="collapse9" class="panel-collapse collapse">
<ul style="list-style-type:none">
<li><font style="color:#337ab7"> Description</font></li>
</ul>
</div>
</li>
<li> <a hef="#" class="accordion-toggle" data-target="#collapse8" data-toggle="collapse"> Data Panel 3</a>
<div id="collapse8" class="panel-collapse collapse">
<ul style="list-style-type:none">
<li><font style="color:#337ab7"> Node 1</font></li>
<li><font style="color:#337ab7"> Node 2</font></li>
<li><font style="color:#337ab7"> Node 3</font></li>
</ul>
</div>
</li>
</ul>
</div>
CSS 风格:
.accordion-toggle:after {
font-family: 'Glyphicons Halflings';
content: "\e082"; <!-- taken from bootstrap.css -->
float: left;
}
.accordion-toggle.collapsed:after {
content: "\e081"; <!-- taken from bootstrap.css -->
}
a
{cursor: pointer; }
在标记中将它们设置为 class="accordion-toggle collapsed"
。这是它们最初将设置为折叠状态并显示 +
图标。
您好,我在 visualforce 页面上使用了以下手风琴切换代码。可折叠切换工作正常,但第一次加载页面时除外。在 pageload/Refresh 上,折叠面板显示时带有符号“-”,而不是预期的内容“+”。有人可以帮我吗?
Visualforce 页面代码:
<a hef="#" class="accordion-toggle" data-target="#collapse1" data-toggle="collapse"> Data Panel 1 </a>
<div id="collapse1" class="panel-collapse collapse">
<ul style="list-style-type:none">
<li> <a hef="#" class="accordion-toggle" data-target="#collapse9" data-toggle="collapse"> Data Panel 2</a>
<div id="collapse9" class="panel-collapse collapse">
<ul style="list-style-type:none">
<li><font style="color:#337ab7"> Description</font></li>
</ul>
</div>
</li>
<li> <a hef="#" class="accordion-toggle" data-target="#collapse8" data-toggle="collapse"> Data Panel 3</a>
<div id="collapse8" class="panel-collapse collapse">
<ul style="list-style-type:none">
<li><font style="color:#337ab7"> Node 1</font></li>
<li><font style="color:#337ab7"> Node 2</font></li>
<li><font style="color:#337ab7"> Node 3</font></li>
</ul>
</div>
</li>
</ul>
</div>
CSS 风格:
.accordion-toggle:after {
font-family: 'Glyphicons Halflings';
content: "\e082"; <!-- taken from bootstrap.css -->
float: left;
}
.accordion-toggle.collapsed:after {
content: "\e081"; <!-- taken from bootstrap.css -->
}
a
{cursor: pointer; }
在标记中将它们设置为 class="accordion-toggle collapsed"
。这是它们最初将设置为折叠状态并显示 +
图标。