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实现预加载图片的方法,涉及jQuery操作img的src属性使用技巧,需要的朋友可以参考下
    2015-03-03
  • HTML+jQuery实现简单的登录页面

    HTML+jQuery实现简单的登录页面

    这篇文章主要介绍了用三种方法实现简单的登录页面的制作:纯HTML、HTML+jQuery(form data)格式、HTML+jQuery(json)格式。感兴趣的同学可以跟随小编一起学习一下
    2021-12-12
  • jquery实现直播弹幕效果

    jquery实现直播弹幕效果

    这篇文章主要为大家详细介绍了jquery实现直播弹幕效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-11-11
  • jquery live()重复绑定的解决方法介绍

    jquery live()重复绑定的解决方法介绍

    本篇文章主要是对jquery中live()重复绑定的解决方法进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • 将form表单通过ajax实现无刷新提交的简单实例

    将form表单通过ajax实现无刷新提交的简单实例

    下面小编就为大家带来一篇将form表单通过ajax实现无刷新提交的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • jquery js 重置表单 reset()具体实现代码

    jquery js 重置表单 reset()具体实现代码

    我们希望表单提交以后,能reset,由于jquery没有这个方法,所以只能采用其他的方法来实现了,具体如下,有此需求的朋友可以参考下,希望对大家有所帮助
    2013-08-08
  • jQuery插件jsonview展示json数据

    jQuery插件jsonview展示json数据

    这篇文章主要为大家详细介绍了jQuery插件jsonview展示json数据的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-05-05
  • 详解jQuery中的prop()使用方法

    详解jQuery中的prop()使用方法

    prop() 方法应该用于检索属性值,例如 DOM 属性,如 selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected,这里脚本之家小编就为大家介绍一下啊
    2020-01-01
  • jquery解决图片路径不存在执行替换路径

    jquery解决图片路径不存在执行替换路径

    在一些图片比较多的网站上会出现访问时图片不存在的情况:默认显示出来的样子很不雅观,可以解决图片不存在时,使用其他的图片替换吗,答案是可以的;感兴趣的朋友可以了解下,或许本文可以帮助到你
    2013-02-02
  • 13 款最热门的 jQuery 图像 360 度旋转插件推荐

    13 款最热门的 jQuery 图像 360 度旋转插件推荐

    这篇文章主要介绍了13 款最热门的 jQuery 图像 360 度旋转插件,非常炫酷实用,有需要的小伙伴参考下
    2014-12-12

最新评论