jQuery手风琴菜单

Posted 2021-02-27

You'll need to download the latest version of jQuery for this to work, as it is linked in the tag. CSS/Xhtml included.

<script language="javascript">
			$(document).ready(function() {
				$('.navchild').hide();
				$('.navgrandchild').hide();
				$('#navroot > li > a, .navchild > li > a').click(function() {
					var visibility = $(this).next('ul').css("display");
					if( visibility == "none" )
					{
						$(this).next('ul').show("normal");
						$(this).parent().siblings().children('ul:visible').hide("normal");
						$('.navgrandchild').hide();
						$('#message').text($(this).text() + " Opened");
					}
					else { $(this).next('ul').hide("normal"); $('#message').text($(this).text() + " Closed");}
				});
			});
		</script>
 
<div id="navigation">
			<ul id="navroot">
				<li>
					<a href="#">Root 1</a>
					<ul class="navchild">
						<li><a href="#">Sub 1</a></li>
						<li><a href="#">Sub 2</a></li>
					</ul>
				</li>
 
				<li>
					<a href="#">Root 2</a>
					<ul class="navchild">
						<li><a href="#" class="child">Child 1</a></li>
						<li><a href="#" class="child">Child 2</a></li>
					</ul>
				</li>
 
				<li>
					<a href="#">Root 3</a>
					<ul class="navchild">
						<li>
							<a href="#">Child 1</a>
							<ul class="navgrandchild">
								<li><a href="#">Grandchild 1</a></li>
								<li><a href="#">Grandchild 2</a></li>
							</ul>
						</li>
						<li>
							<a href="#" >Child </a>
							<ul class="navgrandchild">
								<li><a href="#">Grandchild 1</a></li>
								<li><a href="#">Grandchild 2</a></li>
							</ul>
						</li>
					</ul>
				</li>
 
				<li>
					<a href="#">Root 4</a>
					<ul class="navchild">
						<li><a href="#">Child 1</a></li>
						<li><a href="#">Child 2</a></li>
					</ul>
				</li>
			</ul>
		</div>
 
		<div id="message">
		</div>
 
body {
	margin: 0;
	padding: 0;
}
 
#navigation {
	float: left;
    width: 200px;
    background: #333;
    padding: 20px;
}
 
#navigation li, ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
 
#navigation li a {
    display: block;
    color: #fff;
    width: 100px;
    padding: 5px;
	text-decoration: none;
}
 
#navroot > li > a {
	background: #000;
}
 
.navchild li a {
	background: #666;
}
 
.navgrandchild li a {
	background: #999;
}
 
#message {
	float: left;
	background: #666;
	padding: 20px;
	font-size: 2.0em;
	color: #fff;
}