在手风琴菜单中添加一个标签,bootstrap

时间:2017-05-22 15:54:53

标签: twitter-bootstrap

我为手风琴菜单https://s.bootsnipp.com/iframe/VgZb使用了一个boostrap片段。我已从此页面中提取代码,并希望为菜单添加一个选项卡,但我不能。我试图复制div选择并使id为collapseFive但不起作用。有人帮忙吗?感谢。

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

1 个答案:

答案 0 :(得分:0)

如果您尝试添加另一个窗格,则需要此代码重点:

<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="#"中的panel-title以反映面板上第二个div所需的更改。因此,在我的示例中,panel-collapse包含id="collapseFive",在这种情况下,我更新了panel-heading a代码以获得href="#collapseFive"

希望我理解你的要求。