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 函数式编程
Aug 16 Javascript
JS中实现replaceAll的方法(实例代码)
Nov 12 Javascript
jQuery中使用data()方法读取HTML5自定义属性data-*实例
Apr 11 Javascript
提升PHP安全:8个必须修改的PHP默认配置
Nov 17 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
Apr 12 Javascript
JS代码实现table数据分页效果
May 26 Javascript
Bootstrap Table的使用总结
Oct 08 Javascript
input输入框内容实时监测(附代码)
Aug 15 Javascript
Vue slot用法(小结)
Oct 22 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
Nov 25 Javascript
JS简单判断是否在微信浏览器打开的方法示例
Jan 08 Javascript
Javascript实现秒表计时游戏
May 27 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
定制404错误页面,并发信给管理员的程序
2006/10/09 PHP
php中处理模拟rewrite 效果
2006/12/09 PHP
php的正则处理函数总结分析
2008/06/20 PHP
PHP中json_encode、json_decode与serialize、unserialize的性能测试分析
2010/06/09 PHP
php jquery 多文件上传简单实例
2013/12/23 PHP
使用php测试硬盘写入速度示例
2014/01/27 PHP
php版微信公众平台开发之验证步骤实例详解
2016/09/23 PHP
(仅IE下有效)关于checkbox 三态
2007/05/12 Javascript
js检测输入内容全为空格的方法
2014/05/03 Javascript
jQuery中replaceWith()方法用法实例
2014/12/25 Javascript
javascript中一些util方法汇总
2015/06/10 Javascript
设置点击文本框或图片弹出日历控件的实现代码
2016/05/12 Javascript
基于JS实现类似支付宝支付密码输入框
2016/09/02 Javascript
JavaScript 链式结构序列化详解
2016/09/30 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
2017/06/23 jQuery
详解win7 cmd执行vue不是内部命令的解决方法
2017/07/27 Javascript
jquery之基本选择器practice(实例讲解)
2017/09/30 jQuery
JS实现的按钮点击颜色切换功能示例
2017/10/19 Javascript
利用Vue实现一个markdown编辑器实例代码
2019/05/19 Javascript
python二叉树的实现实例
2013/11/21 Python
在pytorch中对非叶节点的变量计算梯度实例
2020/01/10 Python
Django 博客实现简单的全文搜索的示例代码
2020/02/17 Python
Python新手学习函数默认参数设置
2020/06/03 Python
关于pycharm 切换 python3.9 报错 ‘HTMLParser‘ object has no attribute ‘unescape‘ 的问题
2020/11/24 Python
魔幻般冒泡背景的CSS3按钮动画
2016/02/27 HTML / CSS
css3遮罩层镂空效果的多种实现方法
2020/05/11 HTML / CSS
Vinatis德国:法国领先的葡萄酒邮购公司
2020/09/07 全球购物
大学生求职中的自我评价
2013/10/01 职场文书
医学检验专业大学生求职信
2013/11/18 职场文书
售前工程师职业生涯规划
2014/03/02 职场文书
初中同学会活动方案
2014/08/22 职场文书
教师师德师风整改措施
2014/10/24 职场文书
2014年班主任工作总结
2014/11/08 职场文书
导游词幽默开场白
2019/06/26 职场文书
2019年国庆祝福语(70句)
2019/09/19 职场文书
Nginx tp3.2.3 404问题解决方案
2021/03/31 Servers