网站首页
网站导航
Ctrl+D收藏
首 页
代码段
源码包
文档库
工具箱
代码语言
.
CSharp
.
JS
Java
Asp.Net
C
MSSQL
PHP
Css
PLSQL
Python
Shell
EBS
ASP
Perl
ObjC
VB.Net
VBS
MYSQL
GO
Delphi
AS
DB2
Domino
Rails
ActionScript
Scala
代码分类
文件
系统
字符串
数据库
网络相关
图形/GUI
多媒体
算法
游戏
Jquery
Extjs
Android
HTML5
菜单
网页交互
WinForm
控件
企业应用
安全与加密
脚本/批处理
开放平台
其它
【
Js
】
jquery 表格(展开和折叠列表项)
作者:
泰鑫
/ 发布于
2016/4/26
/
413
HTML: <ul> <li class="address">中国 <ul> <li>北京</li> <li>杭州</li> <li class="address">温州 <ul> <li>鹿城区</li> <li>瓯海区</li> <li>龙湾区</li> </ul> </li> </ul> </li> <li class="address">美国 <ul> <li>华盛顿</li> <li>纽约</li> <li>休斯顿</li> </ul> </li> <li class="address">英国 <ul> <li>伦敦</li> <li>伯明翰</li> </ul> </li> </ul> CSS: ul{ /*在FF和IE8情况下,默认padding-left40px;只用padding-left为10px,可达到预期效果*/ padding-left: 10px; /*用360浏览器测试了下(估计IE7也是这个情况,IE6应该没人用了吧,Mic都抛弃了),没有预期效果,需要加上margin-left: 10px;,达到预期效果*/ /*list-style: none;*/ margin-left: 10px; } .jia{ list-style-image:url(jia.jpg); } .jian{ list-style-image: url(jian.jpg); } .none{ /*没有图片样式,即为默认样式*/ list-style-image:none; } Jquery: $('li.address').addClass('jia'); // 在FF和IE8情况下, $('li.address').children('ul').addClass('none'),可达到预期效果。除了li.address,其他的均是默认样式。如果把class(none)的属性改为list-style:none,则FF和IE8同样达到预期效果,但是360没有,出现每个列表项前都有一个加号 $('li.address').children('ul').addClass('none'); // 在360下达不到,需要加入$('li.address').children().css('list-style', 'none'),如果把class(none)的属性改为list-style:none,如果加下面的语句,360同样没有效果,也是所有的列表项前有个加号。需先把class(none)的属性改为list-style-image:none,再list-style:none。似乎必须要回归原始的样式,才能清除样式。如果开始就改变成其他的样式图片,然后再list-style:none。则360下没有预期效果,依然是所有的列表项前出现加号。 $('li.address').children().css('list-style', 'none'); $('li.address').children().hide(); $('li.address').each(function(index){ $(this).click(function(event){ // alert索引看看,会发现点击'温州'的时候,会先弹出1然后再弹出0,在后再展开内容。这里有个事件冒泡。故下面加了event.stopPropagation(); // alert(index); // event保存着事件对象 // event.target保存着发生时间的目标元素.可以确定首先接收到事件的元素(即实际被点击的元素).this引用的是处理事件的元素. // 故如果 处理事件的元素等于初始就定义的事件对象的实际接收者 if(this==event.target){ if($(this).is('.jia')){ $(this).children().show(); $(this).removeClass('jia'); $(this).addClass('jian'); }else{ $(this).children().hide(); $(this).removeClass('jian'); $(this).addClass('jia'); } // event.stopPropagation()终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后,该节点上处理该事件的处理程序将被调用,事件不再被分派到其他节点。 event.stopPropagation(); } }); });
评论列表
本站所提供的代码,版权归原作者所有,若有侵犯作者版权,请与我们联系,我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。
试试其它关键字
表格
展开和折叠
同语言下
.
Jquery搜索框获取回车事件
.
H5页面添加倒计时,然后自动跳转
.
通过user-agent判断h5页面是在哪个手机App(QQ、微信
.
nginx 禁止未绑定的域名访问
.
JavaScript 获取按键,并屏蔽系统 Window 事件
.
H5之只允许微信浏览器打开,禁止从外部浏览器访问
.
微信打开网址添加在浏览器中打开提示的办法
.
实现JS复制、粘贴,Chrome/Firefox下可用
.
video视频播放,play()、pause()、duration时长、onen
.
HTML5实现MP3上传前的预览和播放时长的获取
可能有用的
.
SQL查询 多列合并成一行用逗号隔开
.
一行一行读取txt的内容
.
C#动态修改文件夹名称(FSO实现,不移动文件)
.
c# 移动文件或文件夹
.
c#图片添加水印
.
Java PDF转换成图片并输出给前台展示
.
网站后台修改图片尺寸代码
.
处理大图片在缩略图时的展示
.
实现对图片上传的接收
.
判断用户输入的是否为IP地址
泰鑫
贡献的其它代码
(
14
)
.
一个检查跑批是否成功的Shell
.
判断一个多边形是不是凸多边形的js算法
.
将UTC时间转换成美国东部时间(EST)
.
多 Notes 文档中附件批量汇总到 Notes 文档中
.
查询显示已重新编译的前 25 个存储过程
.
jquery 表格(展开和折叠列表项)
.
实现复选框的全选与取消
.
jxl导入导出Excel工具类
.
邮件发送工具类
.
八皇后问题
地图
本站
我们
服务
版权
联系
回馈
博客