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

更新时间：2018年07月24日 10:55:09 作者：金含

这篇文章主要介绍了jQuery实现菜单的显示和隐藏功能,结合实例形式分析了jQuery基于事件响应及css方法动态改变菜单样式的相关操作技巧,需要的朋友可以参考下

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.jb51.net 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.jb51.net/code/HtmlJsRun测试，效果如下：

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

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

您可能感兴趣的文章:

jQuery实现预加载图片的方法
这篇文章主要介绍了jQuery实现预加载图片的方法,涉及jQuery操作img的src属性使用技巧,需要的朋友可以参考下
2015-03-03
HTML+jQuery实现简单的登录页面
这篇文章主要介绍了用三种方法实现简单的登录页面的制作：纯HTML、HTML+jQuery(form data)格式、HTML+jQuery(json)格式。感兴趣的同学可以跟随小编一起学习一下
2021-12-12
jquery实现直播弹幕效果
这篇文章主要为大家详细介绍了jquery实现直播弹幕效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-11-11
jquery live()重复绑定的解决方法介绍
本篇文章主要是对jquery中live()重复绑定的解决方法进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-01-01
将form表单通过ajax实现无刷新提交的简单实例
下面小编就为大家带来一篇将form表单通过ajax实现无刷新提交的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-10-10
jquery js 重置表单 reset()具体实现代码
我们希望表单提交以后，能reset，由于jquery没有这个方法，所以只能采用其他的方法来实现了，具体如下，有此需求的朋友可以参考下，希望对大家有所帮助
2013-08-08
jQuery插件jsonview展示json数据
这篇文章主要为大家详细介绍了jQuery插件jsonview展示json数据的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-05-05
详解jQuery中的prop()使用方法
prop() 方法应该用于检索属性值，例如 DOM 属性，如 selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected，这里脚本之家小编就为大家介绍一下啊
2020-01-01
jquery解决图片路径不存在执行替换路径
在一些图片比较多的网站上会出现访问时图片不存在的情况：默认显示出来的样子很不雅观,可以解决图片不存在时，使用其他的图片替换吗，答案是可以的；感兴趣的朋友可以了解下，或许本文可以帮助到你
2013-02-02
13 款最热门的 jQuery 图像 360 度旋转插件推荐
这篇文章主要介绍了13 款最热门的 jQuery 图像 360 度旋转插件，非常炫酷实用，有需要的小伙伴参考下
2014-12-12