jquery实现点击展开列表同时隐藏其他列表


Posted in Javascript onAugust 10, 2015

本文实例讲述了jquery实现点击展开列表同时隐藏其他列表。分享给大家供大家参考。具体如下:

这里使用jquery实现展开、隐藏特效,点击列表标题后该项内容展开,其它项收缩起来,也就是不显示了。个人喜好了,有的喜欢在默认状态下不显示其它选项的内容,这个就是这种情况,仅供参考吧。

运行效果截图如下:

jquery实现点击展开列表同时隐藏其他列表

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js点击展开列表</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
</head>
<script type="text/javascript">
// 收缩展开效果
$(document).ready(function(){
$('.box').click(function(){
$(this).children('.text').slideToggle().parents('.box').siblings('.box').children('.text').hide();
})  
});
</script>
<style type="text/css">
.box{width:200px; margin:0 auto; background:#CCC;}
.text{display:none;}
</style>
<body>
<div class="box">
  <h2>对ASP擅长的程序</h2>
  <div class="text">论坛类和文章类</div>
  </div>
</div>
<div class="box">
  <h2>对PHP擅长的程序</h2>
  <div class="text">博客类和新闻类</div>
  </div>
</div>
<div class="box">
  <h2>对前端擅长的插件</h2>
  <div class="text">jquery</div>
  </div>
</div>
</body>
</html>

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

Javascript 相关文章推荐
关于IE中getElementsByClassName不能用的问题解决方法
Aug 26 Javascript
window.location.href的用法(动态输出跳转)
Aug 09 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
Jun 21 Javascript
基于JavaScript实现单选框下拉菜单添加文件效果
Jun 26 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
Jul 04 Javascript
禁用backspace网页回退功能的实现代码
Nov 15 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
Dec 12 Javascript
Bootstrap源码解读排版(1)
Dec 23 Javascript
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
vue cli2.0单页面title修改方法
Jun 07 Javascript
简单学习5种处理Vue.js异常的方法
Jun 17 Javascript
微信小程序实现左滑删除效果
Nov 18 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
Aug 10 #Javascript
jQuery右下角旋转环状菜单特效代码
Aug 10 #Javascript
jquery实现滑动特效代码
Aug 10 #Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
Aug 10 #Javascript
jquery实现表单输入时提示文字滑动向上效果
Aug 10 #Javascript
javascript与Python快速排序实例对比
Aug 10 #Javascript
javascript密码强度校验代码(两种方法)
Aug 10 #Javascript
You might like
实用函数2
2007/11/08 PHP
php连接mssql的一些相关经验及注意事项
2013/02/05 PHP
奉献出一个封装的curl函数 便于调用(抓数据专用)
2013/07/22 PHP
thinkphp验证码显示不出来的解决方法
2014/03/29 PHP
WordPress导航菜单的滚动和淡入淡出效果的实现要点
2015/12/14 PHP
PHP-FPM运行状态的实时查看及监控详解
2016/11/18 PHP
实例讲解通过​PHP创建数据库
2019/01/20 PHP
用js判断用户浏览器是否是XP SP2的IE6
2007/03/08 Javascript
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
2007/08/08 Javascript
jquery创建一个ajax关键词数据搜索实现思路
2013/02/26 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
2015/09/14 Javascript
浅谈node.js中async异步编程
2015/10/22 Javascript
深入浅析Node.js 事件循环
2015/12/20 Javascript
Javascript基础_简单比较undefined和null 值
2016/06/14 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
2016/07/13 Javascript
JavaScript提高加载和执行效率的方法
2017/02/03 Javascript
关于javascript作用域的常见面试题分享
2017/06/18 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
2018/09/27 Javascript
JavaScript使用类似break机制中断forEach循环的方法
2018/11/13 Javascript
VUE引入第三方js包及调用方法讲解
2019/03/01 Javascript
详解Nodejs get获取远程服务器接口数据
2019/03/26 NodeJs
微信小程序结合mock.js实现后台模拟及调试
2019/03/28 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
2020/08/11 Javascript
vue element ui validate 主动触发错误提示操作
2020/09/21 Javascript
jquery实现淡入淡出轮播图效果
2020/12/13 jQuery
[01:01:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第一场 3月4日
2021/03/11 DOTA
python实现去除下载电影和电视剧文件名中的多余字符的方法
2014/09/23 Python
python WindowsError的错误代码详解
2017/07/23 Python
pyinstaller打包opencv和numpy程序运行错误解决
2019/08/16 Python
Python实现名片管理系统
2020/02/14 Python
如何基于python3和Vue实现AES数据加密
2020/03/27 Python
企业员工爱岗敬业演讲稿
2014/08/26 职场文书
办公室禁烟通知
2015/04/23 职场文书
医院党建工作总结2015
2015/05/26 职场文书
幼儿园2016年感恩节活动总结
2016/04/01 职场文书
分享五个Node.js开发的优秀实践 
2022/04/07 NodeJs