jQuery实现的点击显示隐藏下拉菜单功能完整示例

来源：动视网责编：小采时间：2020-11-27 21:56:44

jQuery实现的点击显示隐藏下拉菜单功能完整示例

jQuery实现的点击显示隐藏下拉菜单功能完整示例:本文实例讲述了jQuery实现的点击显示隐藏下拉菜单功能。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>toggle</ti

推荐度：

点击下载本文 文档为doc格式

导读jQuery实现的点击显示隐藏下拉菜单功能完整示例:本文实例讲述了jQuery实现的点击显示隐藏下拉菜单功能。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>toggle</ti

本文实例讲述了jQuery实现的点击显示隐藏下拉菜单功能。分享给大家供大家参考，具体如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>toggle</title>
 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 <style>
 *{margin: 0;padding: 0}
 .nav1>li>ul{
 display: none}
 .nav1>li{color: red}
 .nav1>li>ul>li{color: black!important;}
 </style>
</head>
<body>
<ul class="nav1">
 <li>aaaaa
 <ul>
 <li>aa22</li>
 <li>aa22</li>
 <li>aa22</li>
 <li>aa22</li>
 </ul>
 </li>
 <li>bbbbb
 <ul>
 <li>bb22</li>
 <li>bb22</li>
 <li>bb22</li>
 <li>bb22</li>
 </ul>
 </li>
 <li>cccc
 <ul>
 <li>cc22</li>
 <li>cc22</li>
 <li>cc22</li>
 <li>cc22</li>
 </ul>
 </li>
 <li>dddddd
 <ul>
 <li>ddd22</li>
 <li>dd22</li>
 <li>dd22</li>
 <li>dd22</li>
 </ul>
 </li>
 <li>eee
 <ul>
 <li>ee22</li>
 <li>ee22</li>
 <li>ee22</li>
 <li>ee22</li>
 </ul>
 </li>
</ul>
<script>
 $(function () {
 var $ali=$(".nav1 li")
 for(var i=0;i<$ali.length;i++){
 $ali.eq(i).click(function () {
 if($(this).find("ul").is(':hidden')){
 $(this).find("ul").show()
 }else{
 $(this).find("ul").hide()
 }
 })
 }
 })
</script>
</body>

PS：感兴趣的朋友可以使用如下在线工具测试上述代码：

在线HTML/CSS/JavaScript前端代码调试运行工具：
http://tools.jb51.net/code/WebCodeRun

在线HTML/CSS/JavaScript代码运行工具：
http://tools.jb51.net/code/HtmlJsRun

更多关于jQuery相关内容还可查看本站专题：《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

jQuery实现的点击显示隐藏下拉菜单功能完整示例

推荐度：

点击下载本文 文档为doc格式

标签：下拉菜单隐藏功能实例

热门焦点

jQuery实现的点击显示隐藏下拉菜单功能完整示例

jQuery实现的点击显示隐藏下拉菜单功能完整示例

jQuery实现的点击显示隐藏下拉菜单功能完整示例

最新推荐

猜你喜欢

热门推荐