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 Form轻松实现文件上传
May 24 jQuery
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
jQuery序列化后的表单值转换成Json
Jun 16 jQuery
简单实现jquery隔行变色
Nov 09 jQuery
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 jQuery
详解JQuery基础动画操作
Apr 12 jQuery
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
9种方法优化jQuery代码详解
Feb 04 jQuery
jquery更改元素属性attr()方法操作示例
May 22 jQuery
jQuery实现鼠标拖拽登录框移动效果
Sep 13 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
中国站长站 For Dede4.0 采集规则
2007/05/27 PHP
使用jQuery的ajax功能实现的RSS Reader 代码
2009/09/03 Javascript
Jquery图片滚动与幻灯片的实例代码
2013/04/08 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
2013/12/05 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
2014/08/12 Javascript
JavaScript实现弹出子窗口并传值给父窗口
2014/12/18 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
2015/04/30 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
2015/12/26 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
2016/05/05 Javascript
jquery属性,遍历,HTML操作方法详解
2016/09/17 Javascript
js 动态生成json对象、时时更新json对象的方法
2016/12/02 Javascript
巧用canvas
2017/01/21 Javascript
jQuery实现动态删除LI的方法
2017/05/30 jQuery
使用js获取伪元素的content实例
2017/10/24 Javascript
vue、react等单页面项目部署到服务器的方法及vue和react的区别
2018/09/29 Javascript
Vue插槽原理与用法详解
2019/03/05 Javascript
Vue父组件如何获取子组件中的变量
2019/07/24 Javascript
JS JQuery获取data-*属性值方法解析
2020/09/01 jQuery
python中while循环语句用法简单实例
2015/05/07 Python
HTML中使用python屏蔽一些基本功能的方法
2017/07/07 Python
Python2.7下安装Scrapy框架步骤教程
2017/12/22 Python
python爬虫中get和post方法介绍以及cookie作用
2018/02/08 Python
Python实现定时自动关闭的tkinter窗口方法
2019/02/16 Python
Python异常处理知识点总结
2019/02/18 Python
python异步实现定时任务和周期任务的方法
2019/06/29 Python
wxPython电子表格功能wx.grid实例教程
2019/11/19 Python
python实现视频读取和转化图片
2019/12/10 Python
浅析python 定时拆分备份 nginx 日志的方法
2020/04/27 Python
Python自动创建Excel并获取内容
2020/09/16 Python
详解如何用canvas画一个微笑的表情
2019/03/14 HTML / CSS
Crabtree & Evelyn英国官网:瑰珀翠护手霜、香水、沐浴和身体护理
2018/04/26 全球购物
建筑文秘专业个人求职信范文
2013/12/28 职场文书
安全生产管理合理化建议书
2014/03/12 职场文书
求职信怎么写
2014/05/23 职场文书
班子查摆四风个人对照检查材料思想汇报
2014/10/04 职场文书
了解MySQL查询语句执行过程(5大组件)
2022/08/14 MySQL