html – 如何修复列表,以便在图标更新之前不必切换两次？

2019年7月28日 157次阅读

基本上发生的事情是当我加载我的页面然后放下我的外部可折叠菜单(.admin)或嵌套的可折叠菜单(.unitsofstudy)时,它不会更新我使用：after选择器设置的glyphicon,除非我切换它两次.

是否有人能够看一看,看看他们是否能找到我搞砸了的地方;我现在已经在这几个小时试图修复但没有成功.如果需要更多信息,请告诉我.

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"> &nbsp; &nbsp;<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")"> &nbsp; &nbsp; &nbsp; &nbsp;<i class="fa fa-book" style="margin-right: 8px;"></i> View Units</a>
                        </li>
                        <li>
                            <a href="@Url.Content("~/Admin/NewOfferedUnit")"> &nbsp; &nbsp; &nbsp; &nbsp;<i class="fa fa-plus" style="margin-right: 10px;"></i> Create Unit Offerings</a>
                        </li>
                        <li>
                            <a href="@Url.Content("~/Admin/NewUnit")"> &nbsp; &nbsp; &nbsp; &nbsp;<i class="fa fa-plus" style="margin-right: 10px;"></i> Register Units</a>
                        </li>
                        <li>
                            <a href="@Url.Content("~/Admin/NewSemester")"> &nbsp; &nbsp; &nbsp; &nbsp;<i class="fa fa-plus" style="margin-right: 10px;"></i> Register Semesters</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

我的CSS：

.admin:after, .unitsofstudy:after {
    font-family: 'Glyphicons Halflings'; 
    content: "\e114";    
    float: right;       
    color: grey;        
}
.admin.collapsed:after, .unitsofstudy.collapsed:after {
    content: "\e080";   
}

最佳答案 你需要给你的主持人一个初始类.collapsed

<li>
    <a class="admin collapsed" data-toggle="collapse" href="#admin">
        <i class="fa fa-tasks" style="margin-right: 16px;"></i>Admin
    </a>
</li>

所以对admin和unitofstudy进行分类让bootstrap知道菜单的初始状态是崩溃的

工作实例

http://codepen.io/jcoulterdesign/pen/6443069430f54e0b635e726c2cb9da02

点赞