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