Twitter bootstrap 在手风琴菜单、引导菜单中再添加一个选项卡
我在手风琴菜单中使用了一个boostrap片段。我已经从这个页面中提取了代码，想为菜单添加一个选项卡，但我不能。我尝试复制div选择并使id为collapseFive的div无效，但无法工作。有人帮忙吗？谢谢Twitter bootstrap 在手风琴菜单、引导菜单中再添加一个选项卡,twitter-bootstrap,Twitter Bootstrap,我在手风琴菜单中使用了一个boostrap片段。我已经从这个页面中提取了代码，想为菜单添加一个选项卡，但我不能。我尝试复制div选择并使id为collapseFive的div无效，但无法工作。有人帮忙吗？谢谢 <div class="container"><br> <div class="row"> <div class="col-sm-3 col-md-3"> <div class="panel-group" id=
<div class="container"><br>
<div class="row">
<div class="col-sm-3 col-md-3">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="glyphicon glyphicon-folder-close">
</span>Clients</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<table class="table">
<tr>
<td>
<span class="glyphicon glyphicon-pencil text-primary"></span><a href="http://www.jquery2dotnet.com">Create clients</a>
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-flash text-success"></span><a href="http://www.jquery2dotnet.com">View clients</a>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><span class="glyphicon glyphicon-th">
</span>Campaigns</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<table class="table">
<tr>
<td>
<a href="http://www.jquery2dotnet.com">Orders</a> <span class="label label-success">$ 320</span>
</td>
</tr>
<tr>
<td>
<a href="http://www.jquery2dotnet.com">Invoices</a>
</td>
</tr>
<tr>
<td>
<a href="http://www.jquery2dotnet.com">Shipments</a>
</td>
</tr>
<tr>
<td>
<a href="http://www.jquery2dotnet.com">Tex</a>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"><span class="glyphicon glyphicon-user">
</span>Statistics</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<table class="table">
<tr>
<td>
<a href="http://www.jquery2dotnet.com">Change Password</a>
</td>
</tr>
<tr>
<td>
<a href="http://www.jquery2dotnet.com">Notifications</a> <span class="label label-info">5</span>
</td>
</tr>
<tr>
<td>
<a href="http://www.jquery2dotnet.com">Import/Export</a>
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-trash text-danger"></span><a href="http://www.jquery2dotnet.com" class="text-danger">
Delete Account</a>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseFour"><span class="glyphicon glyphicon-file">
</span>Account</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body">
<table class="table">
<tr>
<td>
<span class="glyphicon glyphicon-usd"></span><a href="http://www.jquery2dotnet.com">Change password</a>
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-user"></span><a href="http://www.jquery2dotnet.com">Notifications</a>
</td>
</tr>
</table>
</div>
</div>
<div id="collapseFive" class="panel-collapse collapse">
<div class="panel-body">
<table class="table">
<tr>
<td>
<span class="glyphicon glyphicon-usd"></span><a href="http://www.jquery2dotnet.com">Change password</a>
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-user"></span><a href="http://www.jquery2dotnet.com">Notifications</a>
</td>
</tr>
</table>
</div>
</div>
<?php
if ($_SESSION["userStatus"] == "superadmin") {
echo '<div id="collapseFour" class="panel-collapse collapse"><div class="panel-body"><table class="table">';
echo '<tr><td><span class="glyphicon glyphicon-usd"></span><a href="http://www.jquery2dotnet.com">Change password</a>';
echo '</td></tr><tr><td><span class="glyphicon glyphicon-user"></span><a href="http://www.jquery2dotnet.com">Notifications</a>';
echo '</td></tr></table></div></div>';
}
?>
</div>
</div>
</div>
</div>
$ 320
5.
如果您试图添加另一个窗格，则需要以下代码焦点：
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseFive">
<span class="glyphicon glyphicon-th"></span>
Campaigns
</a>
</h4>
</div>
<div id="collapseFive" class="panel-collapse collapse">
<div class="panel-body">
Content
</div>
</div>
</div>
内容
面板标题中的href=“#”
，以反映面板第二个div中所需的更改。因此，在我的示例中，面板折叠具有id=“collapseFive”
，在这种情况下，我更新了面板标题a
标记，使其具有href=“#collapseFive”
希望我能理解您的要求。如果您试图添加另一个窗格，您将需要以下代码重点：
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseFive">
<span class="glyphicon glyphicon-th"></span>
Campaigns
</a>
</h4>
</div>
<div id="collapseFive" class="panel-collapse collapse">
<div class="panel-body">
Content
</div>
</div>
</div>
内容
更改面板标题中的href=“#”
，以反映面板第二个div中所需的更改。因此，在我的示例中，面板折叠具有id=“collapseFive”
，在这种情况下，我更新了面板标题a
标记，使其具有href=“#collapseFive”
希望我能理解你的要求。这真的很有帮助，谢谢。但有一个小问题，当我点击其他窗格时，这个窗格不会像其他窗格一样折叠。你能告诉我你在哪里插入代码，或者告诉我你在哪里插入代码吗？当我运行你的代码和我的代码时，它们就工作了。在div id=“collapseFour”之后，请再次查看我的答案。如果将代码放在拼贴前面板标题之后，您将看到它是有效的。您所做的是，将其作为面板主体中的一个新项目。因此，每个面板面板默认值都是一个手风琴项目。小更正，当我单击窗格时，窗格打开，但当我单击其他窗格时，上一个窗格不会关闭。例如，当我单击第一个窗格时，此窗格打开；当我单击第二个窗格时，第二个窗格打开，第一个窗格关闭，但对于此窗格，情况并非如此。这是个问题。这真的很有帮助，谢谢。但有一个小问题，当我点击其他窗格时，这个窗格不会像其他窗格一样折叠。你能告诉我你在哪里插入代码，或者告诉我你在哪里插入代码吗？当我运行你的代码和我的代码时，它们就工作了。在div id=“collapseFour”之后，请再次查看我的答案。如果将代码放在面板标题前的折叠后面，则