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


Posted in jQuery onMay 17, 2019

本文实例讲述了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.3water.com/code/WebCodeRun

在线HTML/CSS/JavaScript代码运行工具:
http://tools.3water.com/code/HtmlJsRun

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

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

jQuery 相关文章推荐
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
jQuery中DOM操作原则实例分析
Aug 01 jQuery
jQuery轮播图功能制作方法详解
Dec 03 jQuery
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
jQuery控制input只能输入数字和两位小数的方法
May 16 #jQuery
Vue项目中使用jquery的简单方法
May 16 #jQuery
JQuery常见节点操作实例分析
May 15 #jQuery
JQuery属性操作与循环用法示例
May 15 #jQuery
jquery+css实现Tab栏切换的代码实例
May 14 #jQuery
jquery实现二级导航下拉菜单效果实例
May 14 #jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 #jQuery
You might like
使用Apache的rewrite技术
2006/06/22 PHP
php mysql索引问题
2008/06/07 PHP
php微信支付之APP支付方法
2015/03/04 PHP
Yii框架弹出窗口组件CJuiDialog用法分析
2017/01/07 PHP
thinkphp 验证码 的使用小结
2017/05/07 PHP
javascript 节点遍历函数
2010/03/28 Javascript
node+express+ejs制作简单页面上手指南
2014/11/26 Javascript
node.js中debug模块的简单介绍与使用
2017/04/25 Javascript
jQuery操作DOM_动力节点Java学院整理
2017/07/04 jQuery
vue实现表格数据的增删改查
2017/07/10 Javascript
js实现随机点名小功能
2017/08/17 Javascript
使用jQuery实现简单的tab框实例
2017/08/22 jQuery
vue通过指令(directives)实现点击空白处收起下拉框
2018/12/06 Javascript
如何实现小程序与小程序之间的跳转
2020/11/04 Javascript
Python读写Excel文件的实例
2013/11/01 Python
python简单实现基于SSL的IRC bot实例
2015/06/15 Python
在Mac OS上使用mod_wsgi连接Python与Apache服务器
2015/12/24 Python
关于numpy中np.nonzero()函数用法的详解
2017/02/07 Python
Python 数值区间处理_对interval 库的快速入门详解
2018/11/16 Python
Python使用sax模块解析XML文件示例
2019/04/04 Python
Python Django view 两种return的实现方式
2020/03/16 Python
Python 如何对文件目录操作
2020/07/10 Python
Python根据字典的值查询出对应的键的方法
2020/09/30 Python
奇怪的鱼:Weird Fish
2018/03/18 全球购物
威盛公司软件C++工程师笔试题面试题
2012/07/16 面试题
公司授权委托书范本
2014/04/03 职场文书
节约用水标语
2014/06/11 职场文书
贫困证明书格式及范文
2014/10/15 职场文书
张家口市高新区党工委群众路线教育实践活动整改方案
2014/10/25 职场文书
网络营销计划
2015/01/17 职场文书
销售员岗位职责范本
2015/04/11 职场文书
2015元旦感言
2015/12/09 职场文书
如何用JS实现网页瀑布流布局
2021/04/24 Javascript
探讨Java中的深浅拷贝问题
2021/06/26 Java/Android
Python内置的数据类型及使用方法
2022/04/13 Python
python playwright之元素定位示例详解
2022/07/23 Python