编程 Javascript

jQuery简单实现列表隐藏和显示效果示例

Posted in Javascript onSeptember 12, 2016

本文实例讲述了jQuery简单实现列表隐藏和显示效果。分享给大家供大家参考，具体如下：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>隐藏和显示</title>
<style>
*{ padding: 0; margin: 0;}
li{ list-style-type: none;}
body{ margin: 50px;}
a{ text-decoration: none; color:#f00;}
ul{ border:3px solid #abcdef; width: 200px; display: none;}
span{cursor: pointer;}
</style>
</head>
<body>
<span>更多</span>
<ul>
  <li><a href="#">列表一</a></li>
  <li><a href="#">列表二</a></li>
  <li><a href="#">列表三</a></li>
  <li><a href="#">列表四</a></li>
  <li><a href="#">列表五</a></li>
</ul>
<script src="jquery-1.7.2.min.js"></script>
<script>
$(function(){
  var oBtn = $('span');
  var oContent = $('ul');
  oBtn.click(function(){
    /*if(oContent.is(':visible')){
      oContent.slideUp();
    }else{
      oContent.slideDown();
    }*/
    oContent.slideToggle();
  });
});
</script>
</body>
</html>

运行效果图如下：

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

jQuery简单实现列表隐藏和显示效果示例

- Author -

onestopweb

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

解决表单中第一个非隐藏的元素获得焦点的一个方案

Oct 26 Javascript

js获取html参数及向swf传递参数应用介绍

Feb 18 Javascript

JS使用ajax从xml文件动态获取数据显示的方法

Mar 24 Javascript

javascript设置页面背景色及背景图片的方法

Dec 29 Javascript

JavaScript正则表达式匹配 div style标签

Mar 15 Javascript

jQuery内容过滤选择器用法示例

Sep 09 Javascript

React实现点击删除列表中对应项

Jan 10 Javascript

Bootstrap导航条学习使用(二)

Feb 08 Javascript

webpack4.x开发环境配置详解

Aug 04 Javascript

angular6.x中ngTemplateOutlet指令的使用示例

Aug 09 Javascript

如何在JS文件中获取Vue组件

Sep 16 Javascript

类和原型的设计模式之复制与委托差异

Jul 07 Javascript

jQuery实现弹出带遮罩层的居中浮动窗口效果

Sep 12 #Javascript

jQuery实现的无限级下拉菜单功能示例

Sep 12 #Javascript

jQuery实现的图片轮播效果完整示例

Sep 12 #Javascript

Vue组件BootPage实现简单的分页功能

Sep 12 #Javascript

jQuery实现的多张图无缝滚动效果【测试可用】

Sep 12 #Javascript

初识简单却不失优雅的Vue.js

Sep 12 #Javascript

jQuery实现简单的tab标签页效果

Sep 12 #Javascript