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 相关文章推荐
你所要知道JS(DHTML)中的一些技巧
Jan 09 Javascript
javascript Split方法,indexOf方法、lastIndexOf 方法和substring 方法
Mar 21 Javascript
javascript 面向对象,实现namespace,class,继承,重载
Oct 29 Javascript
关于图片的预加载过程中隐藏未知的
Dec 19 Javascript
获取非最后一列td值并将title设为该值的方法
Oct 30 Javascript
javascript实现标签切换代码示例
May 22 Javascript
js制作可以延时消失的菜单
Jan 13 Javascript
js分页之前端代码实现和请求处理
Aug 04 Javascript
详解Vue中watch的高级用法
May 02 Javascript
js实现上下左右键盘控制div移动
Jan 16 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
Feb 15 Javascript
JavaScript实现一键复制内容剪贴板
Jul 23 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
PHP仿博客园 个人博客(1) 数据库与界面设计
2013/07/05 PHP
php正则取img标记中任意属性(正则替换去掉或改变图片img标记中的任意属性)
2013/08/13 PHP
php json与xml序列化/反序列化
2013/10/28 PHP
php上传图片生成缩略图(GD库)
2016/01/06 PHP
PHP转换文本框内容为HTML格式的方法
2016/07/20 PHP
详谈phpAdmin修改密码后拒绝访问的问题
2017/04/03 PHP
PHP基于回溯算法解决n皇后问题的方法示例
2017/11/07 PHP
Thinkphp5框架实现获取数据库数据到视图的方法
2019/08/14 PHP
解决tp5在nginx下修改配置访问的问题
2019/10/16 PHP
WordPress伪静态规则设置代码实例
2020/12/10 PHP
JavaScript入门学习书籍推荐
2008/06/12 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
2012/09/19 Javascript
javaScript面向对象继承方法经典实现
2013/08/20 Javascript
开发中可能会用到的jQuery小技巧
2014/03/07 Javascript
js实现对ajax请求面向对象的封装
2016/01/08 Javascript
Angularjs material 实现搜索框功能
2016/03/08 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
2016/05/13 Javascript
动态加载js、css的简单实现代码
2016/05/26 Javascript
详解React 在服务端渲染的实现
2017/11/16 Javascript
JavaScript学习笔记之数组基本操作示例
2019/01/09 Javascript
JQuery中queue方法用法示例
2019/01/31 jQuery
浅析vue插槽和作用域插槽的理解
2019/04/22 Javascript
python获得linux下所有挂载点(mount points)的方法
2015/04/29 Python
Python实现Linux的find命令实例分享
2017/06/04 Python
python+matplotlib实现鼠标移动三角形高亮及索引显示
2018/01/15 Python
python中数据爬虫requests库使用方法详解
2018/02/11 Python
解决Python设置函数调用超时,进程卡住的问题
2019/08/08 Python
Atom Python 配置Python3 解释器的方法
2019/08/28 Python
Tensorflow: 从checkpoint文件中读取tensor方式
2020/02/10 Python
conda安装tensorflow和conda常用命令小结
2021/02/20 Python
企业管理专业个人求职信范文
2013/09/24 职场文书
事业单位请假制度
2014/01/13 职场文书
党的群众路线对照检查材料(个人)
2014/09/24 职场文书
数学备课组工作总结
2015/08/12 职场文书
spring项目中切面及AOP的使用方法
2021/06/26 Java/Android
升级 Win11 还是坚守 Win10?微软 Win11 新系统缺失功能大盘点
2022/04/05 数码科技