如何修改我的代码，以便我的列表像手风琴一样运行答案

【问题标题】：How do I modify my code so that my lists operate as accordions如何修改我的代码，以便我的列表像手风琴一样运行
【发布时间】：2016-09-20 16:15:34
【问题描述】：

我还在了解引导程序。如何修改我的代码，以便单击可折叠字段将折叠<li> 标记（手风琴）中的其他字段。我知道您必须使用 data-parent 值，但是在试验时我无法让它崩溃。

示例：点击“用户”链接时，关闭“学习单元”和“注册”部分

<li>
    <a class="admin collapsed sidebar-parent" data-toggle="collapse" href="#sidebar-admin" style="border-top: none;"><i class="fa fa-wrench" style="margin-right: 17px; margin-left: 1px;"></i>Admin</a>
    <ul id="sidebar-admin" class="nav collapse">
        <li>
            <!-- Users -->
            <a class="users collapsed sidebar-subparent" data-toggle="collapse" href="#sidebar-users"> &nbsp; &nbsp;<i class="fa fa-user" style="margin-right: 15px; margin-left: 2px;"></i>Users</a>
            <ul id="sidebar-users" class="nav collapse">
                <li class="sidebar-element">
                    <a href="@Url.Content("~/Admin/Users")"> &nbsp; &nbsp; &nbsp; &nbsp;<i class="fa fa-search" style="margin-right: 8px;"></i> Search Users</a>
                </li>
                <li class="sidebar-element">
                    <a href="@Url.Content("~/Admin/NewUser")"> &nbsp; &nbsp; &nbsp; &nbsp;<i class="fa fa-plus-circle" style="margin-right: 12px;"></i> Add Users</a>
                </li>
                <li class="sidebar-element">
                    <a href="@Url.Content("~/Admin/Roles")"> &nbsp; &nbsp; &nbsp; &nbsp;<i class="fa fa-users" style="margin-right: 10px; margin-left: -1px;"></i> Assign Roles</a>
                </li>
            </ul>

            <!-- Units -->
            <a class="unitsofstudy collapsed sidebar-subparent" data-toggle="collapse" href="#sidebar-units"> &nbsp; &nbsp;<i class="fa fa-university" style="margin-right: 12px;"></i>Units of Study</a>
            <ul id="sidebar-units" class="nav collapse">
                <li class="sidebar-element">
                    <a href="@Url.Content("~/Admin/Units")"> &nbsp; &nbsp; &nbsp; &nbsp;<i class="fa fa-search" style="margin-right: 8px;"></i> Search Units</a>
                </li>
                <li class="sidebar-element">
                    <a href="@Url.Content("~/Admin/NewOfferedUnit")"> &nbsp; &nbsp; &nbsp; &nbsp;<i class="fa fa-plus-circle" style="margin-right: 10px;"></i> Register Units</a>
                </li>
                <li class="sidebar-element">
                    <a href="@Url.Content("~/Admin/NewUnit")"> &nbsp; &nbsp; &nbsp; &nbsp;<i class="fa fa-plus-circle" style="margin-right: 10px;"></i> Register Semester</a>
                </li>
                <li class="sidebar-element">
                    <a href="@Url.Content("~/Admin/NewSemester")"> &nbsp; &nbsp; &nbsp; &nbsp;<i class="fa fa-plus-circle" style="margin-right: 10px;"></i> Offer Units</a>
                </li>
            </ul>

            <!-- Enrolments -->
            <a class="enrolments collapsed sidebar-subparent" data-toggle="collapse" href="#sidebar-admenrolments"> &nbsp; &nbsp;<i class="fa fa-graduation-cap" style="margin-right: 12px; margin-left: -2px;"></i>Enrolments</a>
            <ul id="sidebar-admenrolments" class="nav collapse">
                <li class="sidebar-element">
                    <a href="@Url.Content("~/Admin/Enrolments")"> &nbsp; &nbsp; &nbsp; &nbsp;<i class="fa fa-search" style="margin-right: 8px;"></i> Search Enrolments</a>
                </li>
                <li class="sidebar-element">
                    <a href="@Url.Content("~/Admin/NewEnrolment")"> &nbsp; &nbsp; &nbsp; &nbsp;<i class="fa fa-plus-circle" style="margin-right: 10px;"></i> Enrol Students</a>
                </li>
            </ul>
        </li>
    </ul>
</li>

【问题讨论】：

对我来说似乎工作正常：bootply.com/4wDQKYNucC
抱歉，如果我没有正确解释它；折叠工作正常。我需要帮助的是在打开一个部分时，将其他部分折叠在其下（例如，当您单击“用户”时，它会关闭“学习单元”和“注册”）

标签： javascript jquery twitter-bootstrap accordion collapse

【解决方案1】：

Accordion 行为取决于 panel 类 (http://getbootstrap.com/javascript/#collapse-options)。所以父 #sidebar-admin 的直系孩子必须是 .panel..

http://www.codeply.com/go/Zq1utEY3dV

<ul id="sidebar-admin" class="nav collapse">
        <li class="panel">
            <a class="users collapsed sidebar-subparent" data-toggle="collapse" data-parent="#sidebar-admin" href="#sidebar-users"> &nbsp; &nbsp;<i class="fa fa-user" style="margin-right: 15px; margin-left: 2px;"></i>Users</a>
            <ul id="sidebar-users" class="nav collapse">
                <li class="sidebar-element">
                   ...

【讨论】：