代碼如下，重點是JS部分的代碼（部分樣式引用的是Bootstrapt中的）：<style> .sidebar-menu .special{ font-size: 16px; margin-bottom:6px; } .sidebar-menu ul,li{padding:0;margin:0;} .sidebar-menu .black{ background-color:#2c3b41; } .sidebar-menu .size{ font-size: 18px; } </style> <div class="treemenu"> <ul class="sidebar-menu"> <li class="header">主菜單</li> <!--基本信息查詢--> <li class="treeview"> <a href="#" id="treemenu_a_2"><i class="glyphicon glyphicon-search"></i> <span class="size"> 基本信息查詢</span> <span class="pull-right-container"> <i class="fa fa-angle-left pull-right"></i> </span> </a> <div class="submenu" id="submenu_2"> <ul class="black"> <li class="special" ><a href="/searchCor.html" id="submenu_a_2_1"><i>        </i><i class="fa fa-circle-o"></i> 尾礦庫信息查詢 </a></li> </ul> </div> </li> <!--地理信息查詢--> <li class="treeview"> <a href="#" id="treemenu_a_8"><i class="fa fa-database"></i> <span class="size"> 地理信息查詢</span> <span class="pull-right-container"> <i class="fa fa-angle-left pull-right"></i> </span> </a> <div class="submenu" id="submenu_8"> <ul class="black"> <li class="special" ><a href="" onclick="window.open('/baseGeoInfo.html')" id="submenu_a_8_1"><i>        </i><i class="fa fa-circle-o"></i>基礎地理信息</a></li> <li class="special" ><a href="" onclick="window.open('/runInfo.html')" id="submenu_a_8_2"><i>        </i><i class="fa fa-circle-o"></i>運行動態信息</a></li> <li class="special" ><a href="" onclick="window.open('/helpInfo.html')" id="submenu_a_8_3"><i>        </i><i class="fa fa-circle-o"></i>應急救援信息</a></li> <li class="special" ><a href="" onclick="window.open('/accidentInfo.html')" id="submenu_a_8_4"><i>        </i><i class="fa fa-circle-o"></i>事故范圍模擬</a></li> </ul> </div> </li> <!--基本信息管理--> <li class="treeview"> <a href="#" id="treemenu_a_1"><i class="fa fa-database"></i> <span class="size"> 基本信息管理</span> <span class="pull-right-container"> <i class="fa fa-angle-left pull-right"></i> </span> </a> <div class="submenu" id="submenu_1"> <ul class="black"> <li class="special" ><a href="/corInf.html" id="submenu_a_1_1"><i>        </i><i class="fa fa-circle-o"></i> 企業信息管理 </a></li> <li class="special" ><a href="/basicInf.html?p=1" id="submenu_a_1_2"><i>        </i><i class="fa fa-circle-o" ></i> 尾礦庫信息管理 </a></li> <li class="special" ><a href="/EngineeringInf.html?p=1" id="submenu_a_1_3"><i>        </i><i class="fa fa-circle-o"></i> 工程信息管理 </a></li> <li class="special" ><a href="/remediationInf.html" id="submenu_a_1_4"><i>        </i><i class="fa fa-circle-o"></i> 整治信息管理 </a></li> <li class="special" ><a href="/securityInf.html" id="submenu_a_1_5"><i>        </i><i class="fa fa-circle-o"></i> 安全現狀信息管理 </a></li> <li class="special" ><a href="/emergencyinf.html" id="submenu_a_1_6"><i>        </i><i class="fa fa-circle-o"></i> 應急預案信息管理 </a></li> <li class="special" ><a href="/retireinf.html" id="submenu_a_1_7"><i>        </i><i class="fa fa-circle-o"></i> 退役信息管理 </a></li> <li class="special" ><a href="/intelligence.html" id="submenu_a_1_8"><i>        </i><i class="fa fa-circle-o"></i> 尾礦庫建造許可證 </a></li> <li class="special" ><a href="/run.html" id="submenu_a_1_9"><i>        </i><i class="fa fa-circle-o" ></i> 尾礦庫運行許可證 </a></li> <li class="special" ><a href="/retired.html" id="submenu_a_1_10"><i>        </i><i class="fa fa-circle-o"></i> 尾礦庫退役許可證 </a></li> <li class="special" ><a href="/importdata.html" id="submenu_a_1_11"><i>        </i><i class="fa fa-circle-o"></i> 批量信息導入 </a></li> </ul> </div> </li> <!--地理信息管理--> <li class="treeview"> <a href="#" id="treemenu_a_5"><i class="glyphicon glyphicon-tasks"></i> <span class="size"> 地理信息管理</span> <span class="pull-right-container"> <i class="fa fa-angle-left pull-right"></i> </span> </a> <div class="submenu" id="submenu_7"> <ul> <li class="special" ><a href="" onclick="window.open('/getArcgisPoint.html')" id="submenu_a_7_1"><i>     </i><i class="fa fa-circle-o"></i> 獲取路線點 </a></li> <li class="special" ><a href="" onclick="window.open('/getArcgis3DPoints.html')" id="submenu_a_7_2"><i>     </i><i class="fa fa-circle-o" ></i> 獲取路線點3D </a></li> <li class="special" ><a href="/relationManage.html" id="submenu_a_7_3"><i>     </i><i class="fa fa-circle-o"></i> 地圖關系表管理 </a></li> <li class="special" ><a href="/DamRelationManage.html" id="submenu_a_7_7"><i>     </i><i class="fa fa-circle-o"></i> 地圖干灘關系表管理 </a></li> <li class="special" ><a href="/ImportDamPoint.html" id="submenu_a_7_5"><i>     </i><i class="fa fa-circle-o"></i> 上傳潰壩點狀圖 </a></li> <li class="special" ><a href="/gisdata.html" id="submenu_a_7_8"><i>     </i><i class="fa fa-circle-o"></i> 尾礦庫GIS可視化 </a></li> </ul> </div> </li> <!--路線規划--> <li class="treeview"> <a href="#" id="treemenu_a_3"><i class="glyphicon glyphicon-road"></i> <span class="size"> 路線圖</span> <span class="pull-right-container"> <i class="fa fa-angle-left pull-right"></i> </span> </a> <div class="submenu" id="submenu_3"> <ul class="black"> <li class="special" ><a href="" onclick="window.open('/gdRoutePlan.html')" id="submenu_a_3_1"><i>        </i><i class="fa fa-circle-o"></i> 駕車路線圖 </a></li> <li class="special" ><a href="" onclick="window.open('/walkRoutePlaning.html')" id="submenu_a_3_2"><i>        </i><i class="fa fa-circle-o" ></i> 步行路線圖 </a></li> <li class="special" ><a href="" onclick="window.open('/ridingRoutePlan.html')" id="submenu_a_3_3"><i>        </i><i class="fa fa-circle-o"></i> 騎車路線圖 </a></li> </ul> </div> </li> <!--系統管理--> <li class="treeview"> <a href="#" id="treemenu_a_6"><i class="glyphicon glyphicon-user"></i> <span class="size"> 系統維護</span> <span class="pull-right-container"> <i class="fa fa-angle-left pull-right"></i> </span> </a> <div class="submenu" id="submenu_6"> <ul class="black"> <li class="special" ><a href="/user.html" id="submenu_a_6_1"><i>        </i><i class="fa fa-circle-o"></i> 用戶管理 </a></li> </ul> </div> </li> <li class="treeview"> <a href="/colorselection.html" > <i class=" glyphicon glyphicon-wrench"></i> <span class="size"> 顏色設置 </span> <span class="pull-right-container"> <i class="fa fa-angle-left pull-right"></i> </span> </a> </li> </ul> </div> <!--保持刷新后ul記憶.--> <script> //cookie工具類 var cookieTool = { //讀取cookie getCookie: function(c_name) { if(c_name==null){ return ""; } else if (document.cookie.length > 0) { c_start = document.cookie.indexOf(c_name + "="); if (c_start != -1) { c_start = c_start + c_name.length + 1; c_end = document.cookie.indexOf(";", c_start); if (c_end == -1) { c_end = document.cookie.length; } return unescape(document.cookie.substring(c_start, c_end)); } } return ""; }, //設置cookie setCookie: function(c_name, value, expiredays) { var exdate = new Date(); exdate.setDate(exdate.getDate() + expiredays); //設置日期 document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString()); }, //刪除cookie delCookie: function(c_name) { var exdate = new Date(); exdate.setDate(exdate.getDate() - 1); //昨天日期 document.cookie = c_name + "=;expires=" + exdate.toGMTString(); } }; //菜單事件綁定 $('.treemenu a').bind('click', function() { var $this = $(this); var id = $this.attr('id'); var $submenu = $this.next('.submenu'); if ($submenu.length > 0) { //是否有子菜單 var flag = $(this).next('.submenu:hidden').length > 0 ? true : false; if (flag) { $submenu.show(); } else { $submenu.hide(); } var display = flag ? 'block' : 'none'; cookieTool.setCookie(id, display, 10); } else { cookieTool.setCookie(id, id, 10); var curId = cookieTool.getCookie(id); $('.treemenu').find('.on').removeClass('on').addClass('off'); $('#' + curId).addClass('on'); $('.treemenu a[class="off"]').each(function() { cookieTool.delCookie($(this).attr('id')); //刪除其他已選擇選項cookie }); } }); //頁面加載讀取cookies $('.treemenu a').each(function() { showMenu($(this).attr('id')); }); //讀取cookie顯示菜單 function showMenu(id) { var $this = $('#' + id); var cookie = cookieTool.getCookie(id); if (cookie) { if ($this.next('.submenu').length > 0) { $this.next('.submenu').css('display', cookie); } else { $('#' + cookie).addClass('on'); } } } </script>
效果圖預覽：
通過將展開信息記錄在cookie中，實現刷新頁面后還可以保持菜單欄的展開。第一次使用由於沒有cookie記錄會導致菜單全部展開，用過一次之后就可以實現記憶了。