jQuery实现的点击显示隐藏下拉菜单功能完整示例
更新时间：2019年05月17日 08:48:56 作者：xcj888it
这篇文章主要介绍了jQuery实现的点击显示隐藏下拉菜单功能,结合完整实例形式分析了jQuery事件响应及页面元素属性动态操作简单实现技巧,需要的朋友可以参考下
本文实例讲述了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实现的横向显示轮换效果。2010-05-05
本篇文章详细概述了jQuery选择器的作用并对其进行了实例解析，有助于理解与学习。文章通过对jQuery选择器进行分类的形式进行一一介绍，有助于理解与记忆，希望通过对本文的阅读对大家有所帮助2016-11-11
这篇文章主要为大家详细介绍了jquery精度计算代码,jquery指定精确小数位，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
这篇文章主要为大家详细介绍了jquery实现图片平滑滚动的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
我们用一个语句就让下面五个div显示成功，具体实现如下，感兴趣的朋友可以参考下2013-10-10
这篇文章主要介绍了jQuery实现列表的增加和删除功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧2018-06-06
这篇文章主要为大家详细介绍了jQuery实现手势解锁密码特效，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
下面小编就为初学者们分享一篇(模仿京东用户注册)用JQuery实现简单表单验证，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01
这篇文章主要介绍了jQuery实现DIV层收缩展开的方法,实例分析了jQuery中toggle与animate等方法的使用技巧,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了jQuery中:nth-child选择器用法,实例分析了:nth-child选择器功能、定义及匹配子元素或奇偶元素的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2014-12-12
最新评论