微信小程序营销版_jQuery完成的点击显示隐藏下拉

2021-01-07 13:48

jQuery实现的点击显示隐藏下拉菜单功能完整示例       这篇文章主要介绍了jQuery实现的点击显示隐藏下拉菜单功能,结合完整实例形式分析了jQuery事件响应及页面元素属性动态操作简单实现技巧,需要的朋友可以参考下

本文实例讲述了jQuery实现的点击显示隐藏下拉菜单功能。分享给大家供大家参考,具体如下:

 !DOCTYPE html 
 html lang="en" 
 head 
 meta charset="UTF-8" 
 title toggle /title 
 script src="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 
 li aaaaa
 li aa22 /li 
 li aa22 /li 
 li aa22 /li 
 li aa22 /li 
 /ul 
 /li 
 li bbbbb
 li bb22 /li 
 li bb22 /li 
 li bb22 /li 
 li bb22 /li 
 /ul 
 /li 
 
 li cc22 /li 
 li cc22 /li 
 li cc22 /li 
 li cc22 /li 
 /ul 
 /li 
 li dddddd
 li ddd22 /li 
 li dd22 /li 
 li dd22 /li 
 li dd22 /li 
 /ul 
 /li 
 li eee
 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 

凡科抠图:感兴趣的朋友可以使用如下在线工具测试上述代码:

在线HTML/CSS/JavaScript前端代码调试运行工具:

在线HTML/CSS/JavaScript代码运行工具:

更多关于jQuery相关内容还可查看本站专题:《》、《》、《》、《》、《》、《》、《》及《》

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




扫描二维码分享到微信

在线咨询
联系电话

020-66889888