bootstrap左侧手风琴导航点击后变化三角形图标

https://www.jb51.net/article/84408.htm

 

箭头跟随菜单的展开合并而变化

<a href="#systemSetting" class="nav-header" data-toggle="collapse">
<i class="glyphicon glyphicon-cog"></i>
系统管理
<span class="pull-right glyphicon glyphicon-chevron-toggle"></span>
</a>
<ul id="systemSetting" class="nav nav-list collapse secondmenu" style="height: 0px;">
<li class="active"><a href="#"><i class="glyphicon glyphicon-user"></i> 用户管理</a></li>
<li><a href="#"><i class="glyphicon glyphicon-th-list"></i> 菜单管理</a></li>
<li><a href="#"><i class="glyphicon glyphicon-asterisk"></i> 角色管理</a></li>
<li><a href="#"><i class="glyphicon glyphicon-edit"></i> 修改密码</a></li>
<li><a href="#"><i class="glyphicon glyphicon-eye-open"></i> 日志查看</a></li>
</ul> 

  

<style type="text/css">
        /* 点击左侧导航切换上下箭头样式 */
        .nav-header.collapsed > span.glyphicon-chevron-toggle:before {
            content: "\e114";
        }
        .nav-header > span.glyphicon-chevron-toggle:before {
            content: "\e113";
        }

  

 

 

 

posted @ 2022-04-19 17:32  香菜哥哥  阅读(201)  评论(0编辑  收藏  举报