你的位置:首页 > Java教程

[Java教程]垂直可伸缩的导航菜单实例代码


垂直可伸缩的导航菜单实例代码:
可以伸缩的才会垂直导航菜单在网站中有大量的使用,为了节省空间,一般情况下,只有第一个菜单是展开的,其他都是折叠的,只有当点击其他主菜单的时候才会被展开,下面就通过实例代码来介绍一下如何实现此功能。
代码实例如下:

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>垂直可伸缩的导航菜单实例代码-蚂蚁部落</title><style type="text/css">*{ margin:0px; padding:0px;}div{ border:1px solid black; width:100px; font-size:12px; margin:50px auto;}ul{list-style-type:none;}.title{ background-color:#0094ff; border-bottom:1px solid White; color:White; padding:2px 2px; cursor:pointer; font-size:14px; text-align:center}.menu .content li{ height:25px; line-height:25px; text-align:center;}</style><script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script><script type="text/javascript">$(function(){ $(".content").hide(); $(".title").click(function(){  $(this).next().slideDown().parent().siblings().children(".content").slideUp(); }).first().next().slideDown();});</script></head><body><div> <ul class="menu">  <li class="title">主菜单一</li>  <li class="content">   <ul>    <li>蚂蚁部落一</li>    <li>蚂蚁部落二</li>    <li>蚂蚁部落三</li>    <li>蚂蚁部落四</li>   </ul>  </li> </ul> <ul class="menu">  <li class="title">主菜单二</li>  <li class="content">   <ul>    <li>蚂蚁部落一</li>    <li>蚂蚁部落二</li>    <li>蚂蚁部落三</li>    <li>蚂蚁部落四</li>   </ul>  </li> </ul> <ul class="menu">  <li class="title">主菜单三</li>  <li class="content">   <ul>    <li>蚂蚁部落一</li>    <li>蚂蚁部落二</li>    <li>蚂蚁部落三</li>    <li>蚂蚁部落四</li>   </ul>  </li> </ul></div></body></html>

以上代码实现了我们的要求,点击可以展开折叠的菜单,下面介绍一下此效果的实现过程。
一.实现原理:
原理其实非常的简单,首先通过hide()函数将所有的content元素隐藏,然后为每一个content元素注册click事件处理函数,当点击title元素的时候,能够将它下一个同级元素显示,并且将此元素的父元素的兄弟元素中class属性值为content的子元素隐藏,同时在默认情况下将第一个content元素设置为显示。
二.相关阅读:
1.hide()函数可以参阅jQuery的hide()方法一章节。 
2.click事件可以参阅jQuery的click事件一章节。 
3.next()函数可以参阅jQuery的next()方法一章节。 
4.slideDown()函数可以参阅jQuery的slideDown()方法一章节。 
5.parent()函数可以参阅jQuery的parent()方法一章节。
6.siblings()函数可以参阅jQuery的siblings()方法一章节。
7.children()函数可以参阅jQuery的children()方法一章节。 
8.slideUp()函数可以参阅jQuery的slideUp()方法一章节。 
9.first()函数可以参阅jQuery的first()方法一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=10360

更多内容可以参阅:http://www.softwhy.com/jquery/