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 相关文章推荐
Jquery cookie操作代码
Mar 14 Javascript
Javascript代码在页面加载时的执行顺序介绍
May 03 Javascript
全面理解面向对象的 JavaScript(来自ibm)
Nov 10 Javascript
js实现div层缓慢收缩与展开的方法
May 11 Javascript
JS绘制生成花瓣效果的方法
Aug 05 Javascript
js 获取当前web应用的上下文路径实现方法
Aug 19 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
Sep 21 Javascript
实现easyui的datagrid导出为excel的示例代码
Nov 10 Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
Apr 01 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
Jul 10 Javascript
如何通过shell脚本自动生成vue文件详解
Sep 10 Javascript
vant 中van-list的用法说明
Nov 11 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函数常用用法小结
2010/02/08 PHP
PHP关联数组的10个操作技巧
2013/01/21 PHP
php数字每三位加逗号的功能函数
2015/10/22 PHP
PHP框架Laravel插件Pagination实现自定义分页
2020/04/22 PHP
PHP调用微博接口实现微博登录的方法示例
2018/09/22 PHP
详解PHP 7.4 中数组延展操作符语法知识点
2019/07/19 PHP
浅谈javascript中createElement事件
2014/12/05 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
2016/02/18 Javascript
Angular Module声明和获取重载实例代码
2016/09/14 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
2016/12/15 Javascript
JS前端笔试题分析
2016/12/19 Javascript
如何让你的JS代码更好看易读
2017/12/01 Javascript
JavaScript设计模式之职责链模式应用示例
2018/08/07 Javascript
微信小程序动态增加按钮组件
2018/09/14 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
2019/06/11 Javascript
react中Suspense的使用详解
2019/09/01 Javascript
python使用urllib模块开发的多线程豆瓣小站mp3下载器
2014/01/16 Python
在Python中操作日期和时间之gmtime()方法的使用
2015/05/22 Python
在Django的视图中使用form对象的方法
2015/07/18 Python
Python中创建字典的几种方法总结(推荐)
2017/04/27 Python
Python进程间通信之共享内存详解
2017/10/30 Python
python图书管理系统
2020/04/05 Python
python tkinter实现彩球碰撞屏保
2019/07/30 Python
详解PyQt5信号与槽的几种高级玩法
2020/03/24 Python
CSS3 制作绽放的莲花采用效果叠加实现
2013/01/31 HTML / CSS
Becextech新西兰:数码单反相机和手机在线商店
2018/04/27 全球购物
Deichmann英国:德国鞋类零售商
2021/01/30 全球购物
学雷锋树新风演讲稿
2014/05/10 职场文书
英文演讲稿开场白
2014/08/25 职场文书
建筑工地文明标语
2014/10/09 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
长征观后感
2015/06/09 职场文书
欠条样本
2015/07/03 职场文书
python tkinter Entry控件的焦点移动操作
2021/05/22 Python
详细分析PHP7与PHP5区别
2021/06/26 PHP
Spring Data JPA框架持久化存储数据到数据库
2022/04/28 Java/Android