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 ajaxupload插件实现无刷新上传文件
Apr 23 jQuery
jQuery选择器_动力节点Java学院整理
Jul 05 jQuery
jquery easyui如何实现格式化列
Jul 30 jQuery
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
jquery实现动态改变css样式的方法分析
May 27 jQuery
jquery+css3实现的经典弹出层效果示例
May 16 jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
jQuery实现电梯导航模块
Dec 22 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
一个简单的自动发送邮件系统(三)
2006/10/09 PHP
在openSUSE42.1下编译安装PHP7 的方法
2015/12/24 PHP
php 将json格式数据转换成数组的方法
2018/08/21 PHP
php 后端实现JWT认证方法示例
2018/09/04 PHP
JS图片根据鼠标滚动延时加载的实例代码
2013/07/13 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
2013/12/14 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
2015/03/04 Javascript
Jquery简单实现GridView行高亮的方法
2015/06/15 Javascript
jQuery实现每隔几条元素增加1条线的方法
2016/06/27 Javascript
AngularJS基础 ng-href 指令用法
2016/08/01 Javascript
浅谈javascript中的Function和Arguments
2016/08/30 Javascript
最实用的jQuery分页插件
2016/10/09 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
2017/02/05 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
2017/05/18 Javascript
Vue.Draggable实现拖拽效果
2020/07/29 Javascript
vue实现的网易云音乐在线播放和下载功能案例
2019/02/18 Javascript
浅谈vue.watch的触发条件是什么
2020/11/07 Javascript
在Python中使用NLTK库实现对词干的提取的教程
2015/04/08 Python
在Python中使用HTML模版的教程
2015/04/29 Python
Python实现文件内容批量追加的方法示例
2017/08/29 Python
pandas数据框,统计某列数据对应的个数方法
2018/04/11 Python
Python寻找路径和查找文件路径的示例
2019/07/10 Python
Python 过滤错误log并导出的实例
2019/12/26 Python
解决使用Pandas 读取超过65536行的Excel文件问题
2020/11/10 Python
利用CSS3的特性改变文本选中时的颜色
2013/09/11 HTML / CSS
Html5 语法与规则简要概述
2014/07/29 HTML / CSS
英国最大的电子零件及配件零售商:Partmaster
2017/04/24 全球购物
Koral官方网站:女性时尚运动服
2019/04/10 全球购物
石油大学毕业生自荐信
2014/01/28 职场文书
电大奖学金获奖感言
2014/08/14 职场文书
党员领导干部民主生活会批评与自我批评发言
2014/09/28 职场文书
幼儿园开学家长寄语(2015秋季)
2015/05/27 职场文书
2015年教师国培感言
2015/08/01 职场文书
求职信:求职应该注意的问题
2019/04/24 职场文书
用基于python的appium爬取b站直播消费记录
2021/04/17 Python
springcloud整合seata
2022/05/20 Java/Android