1. 程式人生 > 其它 >bootstrap左側手風琴導航點選後變化三角形圖示

bootstrap左側手風琴導航點選後變化三角形圖示

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

 

箭頭跟隨選單的展開合併而變化

<a href="#systemSetting" class="nav-header collapsed" 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";
        }