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中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
jQuery实现一个简单的验证码功能
Jun 26 jQuery
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
React中jquery引用的实现方法
Sep 12 jQuery
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
jquery 时间戳转日期过程详解
Oct 12 jQuery
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
基于ajax及jQuery实现局部刷新过程解析
Sep 12 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
php接口与接口引用的深入解析
2013/08/09 PHP
php将字符串转换成16进制的方法
2015/03/17 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
详解PHP字符串替换str_replace()函数四种用法
2017/10/13 PHP
PHP实现微信退款功能
2018/10/02 PHP
PHP isset empty函数相关面试题及解析
2020/12/11 PHP
javascript下判断一个对象是否具有指定名称的属性的的代码
2010/01/11 Javascript
js数组的操作详解
2013/03/27 Javascript
js获取系统的根路径实现介绍
2013/09/08 Javascript
JavaScript关闭当前页面(窗口)不带任何提示
2014/03/26 Javascript
node.js中的http.response.setHeader方法使用说明
2014/12/14 Javascript
node.js中的fs.write方法使用说明
2014/12/15 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
2015/01/13 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
2015/08/18 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
2015/09/01 Javascript
jquery如何获取元素的滚动条高度等实现代码
2015/10/19 Javascript
微信小程序 条件渲染详解
2016/10/09 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
2018/06/20 Javascript
Three.JS实现三维场景
2018/12/30 Javascript
10个最受欢迎的 JavaScript框架(推荐)
2019/04/24 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
2019/04/25 Javascript
python使用json序列化datetime类型实例解析
2018/02/11 Python
matplotlib savefig 保存图片大小的实例
2018/05/24 Python
Python将文本去空格并保存到txt文件中的实例
2018/07/24 Python
Python Json数据文件操作原理解析
2020/05/09 Python
CSS3 完美实现圆角效果
2009/07/13 HTML / CSS
基于Html5实现的语音搜索功能
2019/05/13 HTML / CSS
投资意向书范本
2014/04/01 职场文书
县委常委班子专题民主生活会查摆问题及整改措施
2014/09/27 职场文书
村主任群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
2014镇党委书记党建工作汇报材料
2014/11/02 职场文书
索赔员岗位职责
2015/02/15 职场文书
2015年外联部工作总结
2015/04/03 职场文书
golang goroutine顺序输出方式
2021/04/29 Golang
python 爬取华为应用市场评论
2021/05/29 Python
Python 游戏大作炫酷机甲闯关游戏爆肝数千行代码实现案例进阶
2021/10/16 Python