先给大家看下效果图，效果图展示如下：

关键代码如下所示：

html xmlns=' http://www。w3。org/1999/XHTML ' head runat=' server ' meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /title首页/titlelink href='./JQuery/easy ui/themes/icon。CSS ' rel='样式表/link href='./JQuery/easy ui/themes/default/easy ui。CSS ' rel='样式表'/脚本src='http:/JQuery/JQuery。量滴js '/script脚本src=' http :/JQuery/easy ui/JQuery。简单的用户界面。量滴js '/script脚本src=' http :/JQuery/easy ui/locale/easy ui-lang-zh _ cn。js '/script style # div _ left menu div { font-size : 15px；} # div _ left menu div ul { margin : 15px 15px 15px；padd : 0；飞越：隐藏；线高： 40px} # div _ leftmenu div ul li {列表样式-类型：无；背景-color : # dfe 2e 3；文本对齐：中心；边距-底部： 15px} # div _ leftmenu div ul li:last类型列表{页边距-底部： 0;}/style/head body class=' easy ui-layout ' style=' font-size : 15px；'表单id='form1' runat='server '！-左侧- div数据-选项='region:'west '，title : ' ' ' style=' width : 250 px；背景色：粉蓝色；font-size : inherit'div id=' div _ welcome ' style=' margin : 15px 0 15px 0；文本对齐：中心管理员，欢迎您/div div id=' div _ left menu ' class=' measuri-accordion ' div title=' title 1 ' ulli的撒打算的/Li/ul/div标题=' title 2 '/div标题=' title 3 '/div/div/div！-右侧- div数据-选项='region:'center '，title : ' ' ' style=' padd : 5px；/div/表单/正文/html好了，代码到此结束。下篇文章给大家介绍jQuery Easyui使用（二)之可折叠面板动态加载无效果的解决方法

以上所述是小编给大家介绍的jQuery Easyui使用（一)之可折叠面板的布局手风琴菜单，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！