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 相关文章推荐
javascript innerText和innerHtml应用
Jan 28 Javascript
8个超棒的学习 jQuery 的网站 推荐收藏
Apr 02 Javascript
关于js获取radio和select的属性并控制的代码
May 12 Javascript
JS HTML5 音乐天气播放器(Ajax获取天气信息)
May 26 Javascript
ie9 提示'console' 未定义问题的解决方法
Mar 20 Javascript
jquery图片滚动放大代码分享(2)
Aug 28 Javascript
AngularJS基础 ng-value 指令简单示例
Aug 03 Javascript
layui之select的option叠加问题的解决方法
Mar 08 Javascript
vue-自定义组件传值的实例讲解
Sep 18 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
Nov 11 Javascript
js实现贪吃蛇游戏 canvas绘制地图
Sep 09 Javascript
JavaScript parseInt0.0000005打印5原理解析
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 access 数据连接与读取保存编辑数据的实现代码
2010/05/12 PHP
PHP类的静态(static)方法和静态(static)变量使用介绍
2012/02/19 PHP
PHP header()函数常用方法总结
2014/04/11 PHP
PHP输出缓冲控制Output Control系列函数详解
2015/07/02 PHP
PHP PDOStatement::getAttribute讲解
2019/02/01 PHP
Thinkphp5 如何隐藏入口文件index.php(URL重写)
2019/10/16 PHP
弹出广告特效代码(一个IP只弹出一次)
2007/05/11 Javascript
一个tab标签切换效果代码
2009/03/27 Javascript
jQuery 常见学习网站与参考书
2009/11/09 Javascript
最新28个很棒的jQuery 教程
2011/05/28 Javascript
JS复制内容到剪切板的实例代码(兼容IE与火狐)
2013/11/19 Javascript
jquery中交替点击事件的实现代码
2014/02/14 Javascript
元素绑定click点击事件方法
2015/06/08 Javascript
javascript实现移动端上的触屏拖拽功能
2016/03/04 Javascript
详细总结Javascript中的焦点管理
2016/09/17 Javascript
Bootstrap table 定制提示语的加载过程
2017/02/20 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
2017/02/21 Javascript
seajs模块压缩问题与解决方法实例分析
2017/10/10 Javascript
利用ES6实现单例模式及其应用详解
2017/12/09 Javascript
小程序日历控件使用方法详解
2018/12/29 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
2020/07/19 Javascript
解决vuecli3中img src 的引入问题
2020/08/04 Javascript
vue+element实现动态加载表单
2020/12/13 Vue.js
[03:58]兄弟们,回来开黑了!DOTA2昔日战友招募宣传视频
2016/07/17 DOTA
Python字符编码与函数的基本使用方法
2017/09/30 Python
详解python的ORM中Pony用法
2018/02/09 Python
python 从list中随机取值的方法
2020/11/16 Python
如何配置、使用和清除Smarty缓存
2015/12/23 面试题
Java工程师面试集锦之Spring框架
2013/06/16 面试题
分别介绍一下Session Bean和Entity Bean
2015/03/13 面试题
会计电算化应届生求职信
2013/11/03 职场文书
洗手间标语
2014/06/23 职场文书
作风大整顿心得体会
2014/09/10 职场文书
党员学习中共十八大思想报告
2014/09/12 职场文书
专家推荐信怎么写
2015/03/25 职场文书
2019年英语版感谢信(8篇)
2019/09/29 职场文书