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>

 

posted @ 2019-01-09 17:29  爱跳舞的程序员  阅读(526)  评论(0编辑  收藏  举报