jQuery UI Accordion（手风琴）_jquery ui-accordion-优快云博客

本文介绍如何利用jQuery插件实现网页上的手风琴菜单效果。通过设置不同的参数，如激活状态、表头选择器、导航选项等，可以定制化菜单的显示方式。文章包含完整的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

源代码：

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