您所在的位置:小祥子 » 编程 » JavaScript » 正文

jQuery如何实现点击下拉菜单的隐藏和显示

时间:2015-07-11 编辑:一落叶而知秋 来源:Cnblogs

jQuery如何实现点击下拉菜单的隐藏和显示:
在众多的网站都有这样的效果,那就是点击一个父菜单就会显示下拉子菜单,再点击父菜单,那么子菜单就会隐藏,下面就简单介绍一下如何实现此中效果。这里只介绍如何使用jQuery实现此效果,暂且不考虑效果的美观度,代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
<style type="text/CSS"> 
*{ 
  margin:0px; 
  padding:0px; 
  font-size:14px; 
} 
ul{ 
  list-style:none; 
} 
.main .nav{ 
  width:100px; 
  margin:0px auto; 
  margin-top:3px; 
} 
.main .nav a{ 
  width:100px; 
  height:25px; 
  line-height:25px; 
  text-align:center; 
  text-decoration:none; 
  background-color:green; 
  display:block; 
} 
.main .nav .navcontent{ 
  display:none; 
} 
</style> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.JS"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
  var navs=$(".nav"); 
  var navcontents=$(".navcontent"); 
  var navlen=navs.length; 
    
  $(".nav a").click(function(){ 
    if($(this).siblings().css("display")=="none"){ 
      $(this).siblings().css("display","block") 
    } 
    else{ 
      $(this).siblings().css("display","none")  
    }    
  })  
}) 
</script> 
</head> 
<body> 
<div> 
  <ul class="main"> 
   <li class="nav"> 
    <a href="#">蚂蚁部落</a> 
    <ul class="navcontent"> 
     <li>搜索优化</li> 
     <li>CSS专区</li> 
     <li>ASP专区</li> 
    </ul> 
   </li> 
   <li class="nav"> 
    <a href="#">前台专区</a> 
    <ul class="navcontent"> 
     <li>搜索优化</li> 
     <li>CSS专区</li> 
     <li>ASP专区</li> 
    </ul> 
   </li> 
   <li class="nav"> 
    <a href="#">后台专区</a> 
    <ul class="navcontent"> 
     <li>搜索优化</li> 
     <li>CSS专区</li> 
     <li>ASP专区</li> 
    </ul> 
   </li> 
  </ul> 
</div> 
</body> 
</html>

以上代码实现了点击导航栏主菜单实现二级菜单的隐藏域显示效果。以上代码并不够美观,可能还有许多改进的地方,这里只是提供了一种实现此效果的思想。由于jQuery2.0不再支持toggle()函数,所以这里没有使用。

原文地址是:http://www.51texiao.cn/jqueryjiaocheng/2015/0504/670.html

关键词:点击 菜单 隐藏 显示