JavaScript jQuery Accordian菜单

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript jQuery Accordian菜单相关的知识,希望对你有一定的参考价值。

<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;
}

以上是关于JavaScript jQuery Accordian菜单的主要内容,如果未能解决你的问题,请参考以下文章

537. Complex Number Multiplication

537. Complex Number Multiplication

537. Complex Number Multiplication

javascript/jQuery - 啥是 jQuery.fx?

jQuery 是一个 JavaScript 库。

jquery和javascript的区别(转载自脚本之家)