Basically what happens is when I load my page and then drop down either my outer collapsible menu (the .admin
) or the nested collapsible menu ( .unitsofstudy
), it does not update the glyphicon I have set using the :after
selector unless I toggle it twice.
Would anyone be able to take a look and see if they can spot where I have screwed this up; I have been at this for a few hours now trying to fix but with no success. If any more info is needed let me know.
HTML:
<div id="sidebar-collapse" class="col-sm-3 col-lg-2 sidebar">
<ul class="nav menu" id="navmenu-sidebar">
<!-- Admin dropdown -->
<li>
<a class="admin" data-toggle="collapse" href="#admin"><i class="fa fa-tasks" style="margin-right: 16px;"></i>Admin</a>
<ul id="admin" class="nav collapse">
<li>
<a class="unitsofstudy" data-toggle="collapse" href="#unitsofstudy"> <i class="fa fa-book" style="margin-right: 12px;"></i>Units of Study</a>
<ul id="unitsofstudy" class="nav collapse">
<li>
<a href="@Url.Content("~/Admin/Units")"> <i class="fa fa-book" style="margin-right: 8px;"></i> View Units</a>
</li>
<li>
<a href="@Url.Content("~/Admin/NewOfferedUnit")"> <i class="fa fa-plus" style="margin-right: 10px;"></i> Create Unit Offerings</a>
</li>
<li>
<a href="@Url.Content("~/Admin/NewUnit")"> <i class="fa fa-plus" style="margin-right: 10px;"></i> Register Units</a>
</li>
<li>
<a href="@Url.Content("~/Admin/NewSemester")"> <i class="fa fa-plus" style="margin-right: 10px;"></i> Register Semesters</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
My CSS:
.admin:after, .unitsofstudy:after {
font-family: 'Glyphicons Halflings';
content: "\e114";
float: right;
color: grey;
}
.admin.collapsed:after, .unitsofstudy.collapsed:after {
content: "\e080";
}
You need to give your anchors an initial class of .collapsed
<li>
<a class="admin collapsed" data-toggle="collapse" href="#admin">
<i class="fa fa-tasks" style="margin-right: 16px;"></i>Admin
</a>
</li>
So class both admin and unitsofstudy to let bootstrap know the initial state of the menu is collapsed
Working example
http://codepen.io/jcoulterdesign/pen/6443069430f54e0b635e726c2cb9da02
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.