编程 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 相关文章推荐

论坛里点击别人帖子下面的回复，回复标题变成“回复 24# 的帖子”

Jun 14 Javascript

一些有用的JavaScript和jQuery的片段分享

Aug 23 Javascript

在js文件中写el表达式取不到值的原因及解决方法

Dec 23 Javascript

基于Bootstrap实现tab标签切换效果

Apr 15 Javascript

微信小程序之数据双向绑定与数据操作

May 12 Javascript

JS 60秒后重新发送验证码的实例讲解

Jul 26 Javascript

js登录滑动验证的实现(不滑动无法登陆)

Jan 03 Javascript

基于react后端渲染模板引擎noox发布使用

Jan 11 Javascript

Node.js创建HTTP文件服务器的使用示例

May 11 Javascript

node-red File读取好保存实例讲解

Sep 11 Javascript

vscode调试node.js的实现方法

Mar 22 Javascript

vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题

Apr 14 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