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 相关文章推荐
判断对象是否Window的实现代码
Jan 10 Javascript
获取服务器传来的数据 用JS去空格的正则表达式
Mar 26 Javascript
javascript实现博客园页面右下角返回顶部按钮
Feb 22 Javascript
JS控制网页动态生成任意行列数表格的方法
Mar 09 Javascript
jQuery+JSON实现AJAX二级联动实例分析
Dec 18 Javascript
JSON简介以及用法汇总
Feb 21 Javascript
总结Javascript中的隐式类型转换
Aug 24 Javascript
从零学习node.js之mysql数据库的操作(五)
Feb 24 Javascript
简单实现jQuery轮播效果
Aug 18 jQuery
基于node.js的fs核心模块读写文件操作(实例讲解)
Sep 10 Javascript
原生js封装添加class,删除class的实例
Nov 06 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
Jun 13 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
国王的咖啡这么大来头,名字的由来是什么
2021/03/03 咖啡文化
PHP令牌 Token改进版
2008/07/18 PHP
php环境配置之CGI、FastCGI、PHP-CGI、PHP-FPM、Spawn-FCGI比较?
2011/10/17 PHP
PHP中全局变量global和$GLOBALS[]的区别分析
2012/08/06 PHP
基于jQuery选择器的整理集合
2013/04/26 Javascript
在百度知道团队中快速审批新成员的js脚本
2014/02/02 Javascript
node.js中的fs.appendFileSync方法使用说明
2014/12/17 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
2015/11/17 Javascript
深入剖析JavaScript中的函数currying柯里化
2016/04/29 Javascript
详解Javascript中prototype属性(推荐)
2016/09/03 Javascript
JavaScript实现窗口抖动效果
2016/10/19 Javascript
jQuery post数据至ashx实例详解
2016/11/18 Javascript
javascript简单进制转换实现方法
2016/11/24 Javascript
原生js实现轮播图的示例代码
2017/02/20 Javascript
Vue中如何实现proxy代理
2018/04/20 Javascript
自定义vue组件发布到npm的方法
2018/05/09 Javascript
微信提示 在浏览器打开 效果实现过程解析
2019/09/10 Javascript
Vue实现点击按钮复制文本内容的例子
2019/11/09 Javascript
vue3.0 加载json的方法(非ajax)
2020/10/26 Javascript
原生js实现自定义滚动条组件
2021/01/20 Javascript
Python实现登录人人网并抓取新鲜事的方法
2015/05/11 Python
Windows下Python2与Python3两个版本共存的方法详解
2017/02/12 Python
快速入门python学习笔记
2017/12/06 Python
python简单实现矩阵的乘,加,转置和逆运算示例
2019/07/10 Python
利用python在大量数据文件下删除某一行的例子
2019/08/21 Python
宝塔面板成功部署Django项目流程(图文)
2020/06/22 Python
Spring @Enable模块驱动原理及使用实例
2020/06/23 Python
python re的findall和finditer的区别详解
2020/11/15 Python
世界上最好的威士忌和烈性酒购买网站:The Whisky Exchange
2016/11/20 全球购物
moosejaw旗下的户外商品促销网站:Mountain Steals
2017/02/27 全球购物
美国木工工具和用品商店:Woodcraft
2019/10/30 全球购物
Can a struct inherit from another class? (结构体能继承类吗)
2014/07/22 面试题
教师的实习自我鉴定
2013/12/17 职场文书
社区党员干部承诺书
2015/05/04 职场文书
python 解决微分方程的操作(数值解法)
2021/05/26 Python
Spring Boot 启动、停止、重启、状态脚本
2021/06/26 Java/Android