我正在创建手风琴menu.In我有两个filters.Ex：测试1和测试2.每个有两个以上的父母这样
菜单1
信息1 - ＆gt;测试1 - ＆GT; TEST2 信息2 - ＆GT; TEST1 - ＆GT; TEST2
菜单2
信息1 - ＆gt;测试1 - ＆GT; TEST2 信息2 - ＆GT; TEST1 - ＆GT; TEST2
在页面加载时，菜单1和菜单2第一级默认打开。仅限于父级（仅在两个菜单中的信息1和信息2）。如果我们单击菜单1的信息1，其显示信息的子项1其他自动隐藏。尝试下面的代码，但我没有得到我的预期输出。我附在代码。任何指导我这样做。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- saved from url=(0073)http://blog.evaria.com/wp-content/themes/blogvaria/jquery/index-multi.php -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery Accordion Example</title>
<style type="text/css">
/* A few IE bug fixes */
* { margin: 0; padding: 0; }
* html ul ul li a { height: 100%; }
* html ul li a { height: 100%; }
* html ul ul li { margin-bottom: -1px; }
body { padding-left: 10em; font-family: Arial, Helvetica, sans-serif; }
#theMenu { width: 200px; height: 350px; margin: 30px 0; padding: 0; }
/* Some list and link styling */
ul li { width: 200px; }
ul ul li { border-left: 25px solid #69c; padding: 0; width: 175px; margin-bottom: 0; }
ul ul li a { display:block; color: #000; padding: 3px 6px; font-size: small; }
ul ul li a:hover { display:block; color: #369; background-color: #eee; padding: 3px 8px; font-size: small; }
/* For the xtra menu */
ul ul ul li { border-left: none; border-bottom: 1px solid #eee; padding: 0; width: 175px; margin-bottom: 0; }
ul ul ul li a { display:block; color: #000; padding: 3px 6px; font-size: small; }
ul ul ul li a:hover { display:block; color: #369; background-color: #eee; padding: 3px 8px; font-size: small; }
li { list-style-type: none; }
h2 { margin-top: 1.5em; }
/* Header links styling */
h3.head a {
color: #333;
display:block;
border-top: 1px solid #36a;
border-right: 1px solid #36a;
background: #ddd url(down.gif) no-repeat;
background-position: 98% 50%;
padding: 3px 6px;
}
h3.head a:hover {
color: #000;
background: #ccc url(down.gif) no-repeat;
background-position: 98% 50%;
}
h3.selected a {
background: #69c url(up.gif) no-repeat;
background-position:98% 50%;
color: #fff;
padding: 3px 6px;
}
h3.selected a:hover {
background: #69c url(up.gif) no-repeat;
background-position:98% 50%;
color: #36a;
}
/* Xtra Header links styling */
h4.head a {
color: #333;
display:block;
border-top: 1px solid #36a;
border-right: 1px solid #36a;
background: #eee url(down.gif) no-repeat;
background-position: 98% 50%;
padding: 3px 6px;
}
h4.head a:hover {
color: #000;
background: #ddd url(down.gif) no-repeat;
background-position: 98% 50%;
}
h4.selected a {
background: #6c9 url(up.gif) no-repeat;
background-position:98% 50%;
color: #fff;
padding: 3px 6px;
}
h4.selected a:hover {
background: #6c9 url(up.gif) no-repeat;
background-position:98% 50%;
color: #36a;
}
</style>
</head>
<body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="accordion.js"></script>
<script type="text/javascript">
jQuery().ready(function(){
// applying the settings
jQuery('#theMenu').Accordion({
active: 'h3.selected',
header: 'h3.head',
alwaysOpen: false,
animated: true,
showSpeed: 400,
hideSpeed: 800
});
jQuery('#xtraMenu').Accordion({
active: 'h4.selected',
header: 'h4.head',
alwaysOpen: false,
animated: true,
showSpeed: 400,
hideSpeed: 800
});
});
</script>
<ul id="theMenu">
<li style="position: static; ">
<h3 class="head selected"><a href="javascript:;">Title 1</a></h3>
<ul style="display: block; ">
<li><a href="#">Content 1 1</a></li>
<li><a href="#">Content 1 2</a></li>
<li><a href="#">Content 1 3</a></li>
</ul>
</li>
<li style="position: static; ">
<h3 class="head selected"><a href="javascript:;">Title 2</a></h3>
<ul style="display:block; ">
<li>
<ul id="xtraMenu">
<li style="position: static; ">
<h4 class="head"><a href="javascript:;">Content xtra 2 1a</a></h4>
<ul style="display: none; ">
<li><a href="#">Content 2 1 1</a></li>
<li><a href="#">Content 2 1 2</a></li>
<li><a href="#">Content 2 1 3</a></li>
</ul>
</li>
<li style="position: static; ">
<h4 class="head "><a href="javascript:;">Content xtra 2 1b</a></h4>
<ul style="display: none; ">
<li><a href="#">Content 2 2 1</a></li>
<li><a href="#">Content 2 2 2</a></li>
<li><a href="#">Content 2 2 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Content 2 2</a></li>
<li><a href="#">Content 2 3</a></li>
</ul>
</li>
<li>
<h3 class="head selected"><a href="javascript:;">Title 3</a></h3>
<ul style="display:block; ">
<li><a href="#">Content 3 1</a></li>
<li><a href="#">Content 3 2</a></li>
<li><a href="#">Content 3 3</a></li>
</ul>
</li>
<li>
<h3 class="head selected"><a href="javascript:;">Title 4</a></h3>
<ul style="display: block; ">
<li><a href="#">Content 4 1</a></li>
<li><a href="#">Content 4 2</a></li>
<li><a href="#">Content 4 3</a></li>
</ul>
</li>
<li>
<h3 class="head selected"><a href="javascript:;">Title 5</a></h3>
<ul style="display:block; ">
<li><a href="#">Content 5 1</a></li>
<li><a href="#">Content 5 2</a></li>
<li><a href="#">Content 5 3</a></li>
</ul>
</li>
</ul>
</body>
</html>