jQuery UI Accordion（手风琴）

来源：互联网发布：如何联系淘宝客服介入编辑：程序博客网时间：2024/05/17 23:08
源代码：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE html><html><head><base href="<%=basePath%>"><link rel="stylesheet" href="<%=basePath%>jquery-accordion/demo/demo.css" /><script type="text/javascript" src="<%=basePath%>jquery-accordion/lib/jquery.js"></script><script type="text/javascript" src="<%=basePath%>jquery-accordion/lib/chili-1.7.pack.js"></script><script type="text/javascript" src="<%=basePath%>jquery-accordion/lib/jquery.easing.js"></script><script type="text/javascript" src="<%=basePath%>jquery-accordion/lib/jquery.dimensions.js"></script><script type="text/javascript" src="<%=basePath%>jquery-accordion/jquery.accordion.js"></script></script><script type="text/javascript">jQuery().ready(function(){jQuery('#navigation').accordion({active: 0,      //激活打开第一个面板header: '.head',     //选取属性类为head的元素为表头元素navigation: true,    //允许导航 event: 'mouseclick',     //鼠标点击事件响应fillSpace: false,    //允许填充animated: 'easeslide'   //动画，缓慢滑动});});</script></head><body><div style="height:250px;margin-bottom:1em;"><ul id="navigation"><li><a class="head" href="?p=1.1.1">标题1</a><ul><li><a href="?p=1.1.1.1">元素1</a></li><li><a href="?p=1.1.1.2">元素2</a></li><li><a href="?p=1.1.1.3">元素3</a></li><li><a href="?p=1.1.1.4.1">元素4</a></li><li><a href="?p=1.1.1.4.2">元素5</a></li></ul> </li><li><a class="head" href="?p=1.1.2">标题2</a><ul><li><a href="?p=1.1.2.1">元素1</a></li><li><a href="?p=1.1.2.2">元素2</a></li><li><a href="?p=1.1.2.3">元素3</a></li></ul> </li><li><a class="head" href="?p=1.1.3">标题3</a><ul><li><a href="?p=1.1.3.2">元素1</a></li><li><a href="?p=1.1.3.3">元素2</a></li><li><a href="?p=1.1.3.4">元素3</a></li></ul> </li></ul></div></body></html>
运行结果：
API:
0 0