在上篇文章给大家介绍了jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
先上代码：
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>用车管理</title> <link href="https://www.jb51.net/JQuery/easyui/themes/icon.css" /> <link href="https://www.jb51.net/JQuery/easyui/themes/default/easyui.css" /> <script src="https://www.jb51.net/JQuery/jquery.min.js"></script> <script src="https://www.jb51.net/JQuery/easyui/jquery.easyui.min.js"></script> <script src="https://www.jb51.net/JQuery/easyui/locale/easyui-lang-zh_CN.js"></script> <style> #div_left { width: 250px; background-color: powderblue; font-size: inherit; } #div_welcome { margin: 15px 0 15px 0; text-align: center; } #div_leftmenu div { font-size: 15px; } #div_leftmenu div ul { margin: 15px 15px 15px 15px; padding: 0; overflow: hidden; line-height: 40px; max-height: 200px; } #div_leftmenu div ul li { list-style-type: none; background-color: #DFE2E3; text-align: center; margin-bottom: 15px; } #div_leftmenu div ul li:hover{ list-style-type: none; background-color: powderblue; text-align: center; margin-bottom: 15px; cursor:pointer; } #div_leftmenu div ul li:last-of-type { margin-bottom: 0; } </style> </head> <body data-options="fit:true"> <form runat="server"> <!--左侧--> <div data-options="region:'west',title:' '"> <div>admin,欢迎您</div> <div> </div> </div> <!--右侧--> <div data-options="region:'center',title:' '"> </div> </form> <script type="text/javascript"> var usertype = "0"; $(document).ready(function () { var div_leftmenu_html = ''; switch (usertype) { case "0"://车辆管理员 div_leftmenu_html += '<div title="车辆登记">'; div_leftmenu_html += ' <ul>'; div_leftmenu_html += ' <li>车辆登记</li>'; div_leftmenu_html += ' <li>添加</li>'; div_leftmenu_html += ' </ul>'; div_leftmenu_html += '</div>'; div_leftmenu_html += '<div title="用车分派">'; div_leftmenu_html += ' <ul>'; div_leftmenu_html += ' <li>用车分派</li>'; div_leftmenu_html += ' <li>分派</li>'; div_leftmenu_html += ' <li>详情</li>'; div_leftmenu_html += ' </ul>'; div_leftmenu_html += '</div>'; div_leftmenu_html += '<div title="审核人管理">'; div_leftmenu_html += ' <ul>'; div_leftmenu_html += ' <li>审核人管理</li>'; div_leftmenu_html += ' </ul>'; div_leftmenu_html += '</div>'; break; case "1"://学校领导 div_leftmenu_html += '<div title="用车审批">'; div_leftmenu_html += ' <ul>'; div_leftmenu_html += ' <li>用车审批</li>'; div_leftmenu_html += ' <li>审批</li>'; div_leftmenu_html += ' </ul>'; div_leftmenu_html += '</div>'; div_leftmenu_html += '<div title="用车申请">'; div_leftmenu_html += ' <ul>'; div_leftmenu_html += ' <li>用车申请</li>'; div_leftmenu_html += ' <li>申请</li>'; div_leftmenu_html += ' </ul>'; div_leftmenu_html += '</div>'; div_leftmenu_html += '<div title="通知">'; div_leftmenu_html += ' <ul>'; div_leftmenu_html += ' <li>通知</li>'; div_leftmenu_html += ' </ul>'; div_leftmenu_html += '</div>'; break; case "2"://司机 div_leftmenu_html += '<div title="司机确认">'; div_leftmenu_html += ' <ul>'; div_leftmenu_html += ' <li>司机确认</li>'; div_leftmenu_html += ' <li>确认</li>'; div_leftmenu_html += ' </ul>'; div_leftmenu_html += '</div>'; break; case "3"://普通教师 div_leftmenu_html += '<div title="用车申请">'; div_leftmenu_html += ' <ul>'; div_leftmenu_html += ' <li>用车申请</li>'; div_leftmenu_html += ' <li>申请</li>'; div_leftmenu_html += ' </ul>'; div_leftmenu_html += '</div>'; div_leftmenu_html += '<div title="通知">'; div_leftmenu_html += ' <ul>'; div_leftmenu_html += ' <li>通知</li>'; div_leftmenu_html += ' </ul>'; div_leftmenu_html += '</div>'; break; default: break; } $("#div_leftmenu").html(div_leftmenu_html); }); </script> </body> </html>
结果：
接下来不断尝试
一：usertype = "1";
二：usertype = "2";
三：usertype = "3";
四：
//导航菜单绑定初始化 $(".easyui-accordion").accordion();
结果：没效果
五：修改后的代码如下