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中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
jQuery 实时保存页面动态添加的数据的示例
Aug 14 jQuery
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
jQuery插件实现弹性运动完整示例
Jul 07 jQuery
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
jQuery中event.target和this的区别详解
Aug 13 jQuery
基于JQuery和DWR实现异步数据传递
Oct 16 jQuery
Jquery Fade用法详解
Nov 06 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
使用 PHPMAILER 发送邮件实例应用
2012/11/07 PHP
php实现文件下载更能介绍
2012/11/23 PHP
php object转数组示例
2014/01/15 PHP
php中curl和file_get_content的区别
2014/05/10 PHP
PHP 7的一些引人注目的新特性简单介绍
2015/11/08 PHP
PHP验证类的封装与使用方法详解
2019/01/10 PHP
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本
2006/09/22 Javascript
通过 Dom 方法提高 innerHTML 性能
2008/03/26 Javascript
javascript 获取iframe里页面中元素值的方法
2014/02/17 Javascript
js实现按钮加背景图片常用方法
2014/11/01 Javascript
20条学习javascript的编程规范的建议
2014/11/28 Javascript
纯js实现页面返回顶部的动画(超简单)
2017/08/10 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
2019/05/21 Javascript
Vue的路由及路由钩子函数的实现
2019/07/02 Javascript
深入浅析Vue中mixin和extend的区别和使用场景
2019/08/01 Javascript
javascript将扁平的数据转为树形结构的高效率算法
2020/02/27 Javascript
opencv与numpy的图像基本操作
2019/03/08 Python
Python JSON格式数据的提取和保存的实现
2019/03/22 Python
Python终端输出彩色字符方法详解
2020/02/11 Python
Python可以实现栈的结构吗
2020/05/27 Python
pytorch快速搭建神经网络_Sequential操作
2020/06/17 Python
Win10下配置tensorflow-gpu的详细教程(无VS2015/2017)
2020/07/14 Python
css3 transform及原生js实现鼠标拖动3D立方体旋转
2016/06/20 HTML / CSS
CSS3 实现童年的纸飞机
2019/05/05 HTML / CSS
移动端html5模拟长按事件的实现方法
2018/09/30 HTML / CSS
购买瑞典当代设计的腕表和太阳眼镜:TRIWA
2016/10/30 全球购物
红色连衣裙精品店:Red Dress Boutique
2018/08/11 全球购物
Java里面有没有全局变量?为什么?
2015/02/06 面试题
求职简历自荐信范文
2013/10/21 职场文书
房屋租赁意向书
2014/04/01 职场文书
临床护理求职信
2014/04/26 职场文书
快递员岗位职责
2014/09/12 职场文书
OpenCV3.3+Python3.6实现图片高斯模糊
2021/05/18 Python
用 Python 元类的特性实现 ORM 框架
2021/05/19 Python
PostgreSQL自动更新时间戳实例代码
2021/11/27 PostgreSQL
详细介绍python操作RabbitMq
2022/04/12 Python