jQuery实现菜单的显示和隐藏功能示例


Posted in jQuery onJuly 24, 2018

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3water.com jQuery显示菜单隐藏和显示</title>
 </head>
<body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
  /*jQuery演示*/
  $(function(){
   $("#div1").click(function(){
     if($(".div2").css("display")=="block"){
      $(".div2").css("display","none");
    }else {
      $(".div2").css("display","block");
    }
   });
   });
</script>
<!--div演示-->
<input id="div1" type="button" value="显示/隐藏">
<div class="div2" style="display: block">
  <ui>
    <li>aaaa</li>
    <li>aaaa</li>
    <li>aaaa</li>
    <li>aaaa</li>
  </ui>
</div>
</body>
</html>

使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试,效果如下:

jQuery实现菜单的显示和隐藏功能示例

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

jQuery 相关文章推荐
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
jquery 禁止鼠标右键并监听右键事件
Apr 27 jQuery
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
jQuery代码优化方法总结
Jan 29 jQuery
jquery 实现拖动文件上传加载进度条功能
Mar 18 jQuery
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
[jQuery] 事件和动画详解
Mar 05 jQuery
使vue实现jQuery调用的两种方法
May 12 jQuery
jQuery 选择方法及$(this)用法实例分析
May 19 jQuery
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 jQuery
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 #jQuery
jquery实现搜索框功能实例详解
Jul 23 #jQuery
jQuery实现的点击按钮改变样式功能示例
Jul 21 #jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 #jQuery
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 #jQuery
jQuery实现表单动态添加数据并提交的方法
Jul 19 #jQuery
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 #jQuery
You might like
点评山进PR-D3L三波段收音机
2021/03/02 无线电
php 删除数组元素
2009/01/16 PHP
小文件php+SQLite存储方案
2010/09/04 PHP
win7系统配置php+Apache+mysql环境的方法
2015/08/21 PHP
Thinkphp 框架基础之源码获取、环境要求与目录结构分析
2020/04/27 PHP
JQuery在光标位置插入内容的实现代码
2010/06/18 Javascript
JQuery触发radio或checkbox的change事件
2012/12/18 Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
2013/07/02 Javascript
js防止表单重复提交的两种方法
2013/09/30 Javascript
jquery的ajax简单结构示例代码
2014/02/17 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
2016/08/09 Javascript
更靠谱的H5横竖屏检测方法(js代码)
2016/09/13 Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
2017/07/09 Javascript
p5.js实现斐波那契螺旋的示例代码
2018/03/22 Javascript
微信小程序滑动选择器的实现代码
2018/08/10 Javascript
vue+eslint+vscode配置教程
2019/08/09 Javascript
vue draggable resizable gorkys与v-chart使用与总结
2019/09/05 Javascript
JS apply用法总结和使用场景实例分析
2020/03/14 Javascript
python学习数据结构实例代码
2015/05/11 Python
Python判断两个对象相等的原理
2017/12/12 Python
DataFrame 将某列数据转为数组的方法
2018/04/13 Python
PyQt4 treewidget 选择改变颜色,并设置可编辑的方法
2019/06/17 Python
用sleep间隔进行python反爬虫的实例讲解
2020/11/30 Python
HTML5的一个显示电池状态的API简介
2015/06/18 HTML / CSS
美国猫狗药物和用品网站:PetCareRx
2017/01/05 全球购物
乐天旅游香港网站:日本饭店预订
2017/11/29 全球购物
Sneaker Studio法国:购买运动鞋
2018/06/08 全球购物
澳大利亚波西米亚风情网上商店:Czarina
2019/03/18 全球购物
亚洲在线旅行门户网站:Expedia.com.hk(智游网)
2020/04/14 全球购物
汽车电子与维修专业大学生求职信
2013/09/28 职场文书
幼儿园园长岗位职责
2013/11/26 职场文书
法制宣传日活动总结
2014/04/29 职场文书
本科毕业生自荐信
2014/06/02 职场文书
药品营销专业毕业生自荐信
2014/07/02 职场文书
什么是Python装饰器?如何定义和使用?
2022/04/11 Python
MySQL运行报错:“Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggre”解决方法
2022/06/14 MySQL