如何修改我的代码,使我的列表像手风琴一样运行
How do I modify my code so that my lists operate as accordions
我还在了解 bootstrap。如何修改我的代码,以便单击可折叠字段将折叠 <li>
标记(手风琴)中的其他字段。我知道你必须使用 data-parent
值,但是,在实验时我无法让它崩溃。
示例:单击 'Users' link 时,关闭 'Units of Study' 和 'Enrolments' 部分
<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"> <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")"> <i class="fa fa-search" style="margin-right: 8px;"></i> Search Users</a>
</li>
<li class="sidebar-element">
<a href="@Url.Content("~/Admin/NewUser")"> <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")"> <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"> <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")"> <i class="fa fa-search" style="margin-right: 8px;"></i> Search Units</a>
</li>
<li class="sidebar-element">
<a href="@Url.Content("~/Admin/NewOfferedUnit")"> <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")"> <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")"> <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"> <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")"> <i class="fa fa-search" style="margin-right: 8px;"></i> Search Enrolments</a>
</li>
<li class="sidebar-element">
<a href="@Url.Content("~/Admin/NewEnrolment")"> <i class="fa fa-plus-circle" style="margin-right: 10px;"></i> Enrol Students</a>
</li>
</ul>
</li>
</ul>
</li>
手风琴行为取决于 panel
class (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"> <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">
...
我还在了解 bootstrap。如何修改我的代码,以便单击可折叠字段将折叠 <li>
标记(手风琴)中的其他字段。我知道你必须使用 data-parent
值,但是,在实验时我无法让它崩溃。
示例:单击 'Users' link 时,关闭 'Units of Study' 和 'Enrolments' 部分
<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"> <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")"> <i class="fa fa-search" style="margin-right: 8px;"></i> Search Users</a>
</li>
<li class="sidebar-element">
<a href="@Url.Content("~/Admin/NewUser")"> <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")"> <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"> <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")"> <i class="fa fa-search" style="margin-right: 8px;"></i> Search Units</a>
</li>
<li class="sidebar-element">
<a href="@Url.Content("~/Admin/NewOfferedUnit")"> <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")"> <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")"> <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"> <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")"> <i class="fa fa-search" style="margin-right: 8px;"></i> Search Enrolments</a>
</li>
<li class="sidebar-element">
<a href="@Url.Content("~/Admin/NewEnrolment")"> <i class="fa fa-plus-circle" style="margin-right: 10px;"></i> Enrol Students</a>
</li>
</ul>
</li>
</ul>
</li>
手风琴行为取决于 panel
class (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"> <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">
...