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程序设计有所帮助。

Javascript 相关文章推荐
JavaScript面向对象编程
Mar 02 Javascript
jQuery实现带滑动条的菜单效果代码
Aug 26 Javascript
Validform验证时可以为空否则按照指定格式验证
Oct 20 Javascript
Vue工程模板文件 webpack打包配置方法
Dec 26 Javascript
在vue中安装使用vux的教程详解
Sep 16 Javascript
Node.js API详解之 vm模块用法实例分析
May 27 Javascript
浅谈vue 多个变量同时赋相同值互相影响
Aug 05 Javascript
javascript实现图片轮换动作方法
Aug 07 Javascript
vue-simple-uploader上传成功之后的response获取代码
Sep 07 Javascript
Swiper实现导航栏滚动效果
Oct 16 Javascript
如何将Node.js中的回调转换为Promise
Nov 10 Javascript
JS实现简易日历效果
Jan 25 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
You might like
PHP中实现进程间通讯
2006/10/09 PHP
PHP实现今天是星期几的几种写法
2013/09/26 PHP
教你如何快捷的使用cmd访问mysql小技巧
2014/05/26 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
PHP使用 Imagick 扩展实现图片合成,圆角处理功能示例
2019/09/09 PHP
更正确的asp冒泡排序
2007/05/24 Javascript
json的前台操作和后台操作实现代码
2012/01/20 Javascript
原生javascript实现的分页插件pagenav
2014/08/28 Javascript
JQuery复制DOM节点的方法
2015/06/11 Javascript
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
2015/11/02 Javascript
JavaScript笔记之数据属性和存储器属性
2016/03/31 Javascript
jQuery代码实现表格中点击相应行变色功能
2016/05/09 Javascript
jQuery实现拖拽页面元素并将其保存到cookie的方法
2016/06/12 Javascript
vue封装第三方插件并发布到npm的方法
2017/09/25 Javascript
vue-cli 自定义指令directive 添加验证滑块示例
2017/10/19 Javascript
jQuery无冲突模式详解
2019/01/17 jQuery
Vue表单之v-model绑定下拉列表功能
2019/05/14 Javascript
layui 弹出删除确认界面的实例
2019/09/06 Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
2020/09/09 Javascript
JavaScript实现点击自制菜单效果
2021/02/02 Javascript
[04:03]DOTA2英雄梦之声_第02期_风暴之灵
2014/06/30 DOTA
让python的Cookie.py模块支持冒号做key的方法
2010/12/28 Python
Python 序列化 pickle/cPickle模块使用介绍
2014/11/30 Python
简单解析Django框架中的表单验证
2015/07/17 Python
基于并发服务器几种实现方法(总结)
2017/12/29 Python
Cython编译python为so 代码加密示例
2019/12/23 Python
Python 字典中的所有方法及用法
2020/06/10 Python
Python叠加矩形框图层2种方法及效果
2020/06/18 Python
详解Windows下PyCharm安装Numpy包及无法安装问题解决方案
2020/06/18 Python
python3中TQDM库安装及使用详解
2020/11/18 Python
Ariat英国官网:为世界顶级马术运动员制造最优质的鞋类和服装
2020/02/14 全球购物
《水上飞机》教学反思
2014/04/10 职场文书
员工试用期自我评价
2014/09/18 职场文书
村党组织公开承诺书
2015/04/30 职场文书
辛亥革命观后感
2015/06/02 职场文书
Three.js实现雪糕地球的使用示例详解
2022/07/07 Javascript