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 相关文章推荐
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
vue-cli webpack 引入jquery的方法
Jan 10 jQuery
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 jQuery
jquery的 filter()方法使用教程
Mar 22 jQuery
jQuery中的for循环var与let的区别
Apr 21 jQuery
jQuery轮播图实例详解
Aug 15 jQuery
JQuery属性操作与循环用法示例
May 15 jQuery
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 jQuery
jquery实现聊天机器人
Feb 08 jQuery
JQuery事件冒泡和默认行为代码实例
May 13 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
Ajax PHP分页演示
2007/01/02 PHP
PHP Google的translate API代码
2008/12/10 PHP
snoopy 强大的PHP采集类使用实例代码
2010/12/09 PHP
PHP连接SQLServer2005的实现方法(附ntwdblib.dll下载)
2012/07/02 PHP
PHP目录与文件操作技巧总结(创建,删除,遍历,读写,修改等)
2016/09/11 PHP
ANGULARJS中用NG-BIND指令实现单向绑定的例子
2014/12/08 Javascript
jQuery处理图片加载失败的常用方法
2015/06/08 Javascript
javascript自定义滚动条实现代码
2020/04/20 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
2017/12/19 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
2018/08/19 Javascript
微信小程序引入VANT组件的方法步骤
2019/09/19 Javascript
简单实现节流函数和防抖函数过程解析
2019/10/08 Javascript
详解Vue 的异常处理机制
2020/11/30 Vue.js
python局域网ip扫描示例分享
2014/04/03 Python
Python简单操作sqlite3的方法示例
2017/03/22 Python
详解Python 数据库的Connection、Cursor两大对象
2018/06/25 Python
Django基础知识与基本应用入门教程
2018/07/20 Python
使用Python-OpenCV向图片添加噪声的实现(高斯噪声、椒盐噪声)
2019/05/28 Python
django admin组件使用方法详解
2019/07/19 Python
Flask框架学习笔记之使用Flask实现表单开发详解
2019/08/12 Python
用纯CSS3实现网页中常见的小箭头
2017/10/16 HTML / CSS
HTML5 canvas基本绘图之绘制矩形
2016/06/27 HTML / CSS
浅谈html5之sse服务器发送事件EventSource介绍
2017/08/28 HTML / CSS
Waterford加拿大官方网站:世界著名的水晶杯品牌
2016/11/01 全球购物
香港中原电器网上商店:Chung Yuen
2019/06/26 全球购物
Python是如何进行类型转换的
2013/06/09 面试题
自荐信的五个重要部分
2013/10/29 职场文书
学生个人的自我评价分享
2013/11/05 职场文书
编辑找工作求职信分享
2014/01/03 职场文书
迟到检讨书5000字
2014/01/31 职场文书
企业内控岗位的职责
2014/02/07 职场文书
服务标兵事迹材料
2014/05/04 职场文书
个人自荐书范文
2015/03/09 职场文书
工厂采购员岗位职责
2015/04/07 职场文书
SQLServer2019 数据库的基本使用之图形化界面操作的实现
2021/04/08 SQL Server
Go语言中的UTF-8实现
2021/04/26 Golang