您的位置：首页 > Web前端 > JQuery

jQuery UI Accordion（手风琴）

2015-09-07 11:02 573 查看

源代码：

<%@ 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:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航