<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery easy ui 学习之——Accordion</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="Css/default.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" type="text/css" href="js/themes/default/easyui.css" /> <link rel="stylesheet" type="text/css" href="js/themes/icon.css" /> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/jquery.easyui.pack.js"></script> <script type="text/javascript"> $( function () { $(‘#myaccrdion‘).accordion(); } ); </script> </head> <body> <div style="width: 200px; height: 300px; overflow: hidden;" id="myaccrdion" border="true" fit="falase" class="easyui-accordion"> <div title="控件使用" icon="icon-sys"> <ul> <li> <div class="selected"> <a href="http://hxling.cnblogs.com" target="mainFrame"><span class="icon-nav icon"></span> 菜单管理</a></div> </li> <li> <div class=""> <a href="demo.html" target="mainFrame"><span class="icon-add icon"></span>添加用户</a></div> </li> <li> <div class=""> <a href="demo2.html" target="mainFrame"><span class="icon-users icon"></span>用户管理</a></div> </li> <li> <div class=""> <a href="demo2.html" target="mainFrame"><span class="icon-role icon"></span>角色管理</a></div> </li> <li> <div class=""> <a href="demo.html" target="mainFrame"><span class="icon-set icon"></span>权限设置</a></div> </li> <li> <div class=""> <a href="demo.html" target="mainFrame"><span class="icon-log icon"></span>系统日志</a></div> </li> </ul> </div> <div title="员工管理" icon="icon-sys"> 员工管理 </div> <div title="部门管理" icon="icon-sys"> 部门管理 </div> <div title="质量管理" icon="icon-sys"> 质量管理 </div> </div> 这个控件是有点类似menu控件，也需指定class="easyui-accordion"。另外我们要注意一下fit属性，<br />如果将fit属性指定为true，那么它的大小将自适应它的父容器。其他的到没有什么了？如果你自己觉<br />得还有疑问可以查阅官方文档。 </body> </html> 欢迎进入我的衣橱》》
jquery easyui，Accordion的使用 （二）
原文：http://www.cnblogs.com/lxclqy/p/4151711.html