LigerUi折叠与展开
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'demo01.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <%@include file="/commons/include/get.jsp"%> <script type="text/javascript"> $(function() { $("#accordion1").ligerAccordion({ //宽度只能控制第一个div的样式width //height: 400 }); }); </script> <style type="text/css"> body { padding: 20px; margin: 0 auto; } #accordion1 { width: 100%; overflow: hidden; margin: 0 auto; } </style> </head> <body style="padding: 10px"> <div id="accordion1"> <div title="功能列表" data-icon="${ctx}/css/ligerUI/images/topicon.gif"> <ul> <li>列表一</li> <li>列表二</li> <li>列表三</li> <li>列表四</li> <li>列表五</li> </ul> </div> <div title="列表"> <ul> <li>列表一</li> <li>列表二</li> <li>列表三</li> <li>列表四</li> <li>列表五</li> </ul> </div> <div title="其他" style="padding: 10px"> 其他内容, <p>q <p>1 <p>1 <p>1 <p>1 </div> </div> <iframe> </iframe> </body> </html>