Bootstrap 3: 图标转换事件 Change icons when toggle
代码:
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>$(function($) {//After it toggle the content with this button$('.content_toggle').hide();$('.link-toggle').before('<i class="fa fa-caret-right"></i>');$(".link-toggle").click(function() {$(this).toggleClass('active');$(this).next(".project .content_toggle").slideToggle("slow");$(this).closest('.project').find('i').toggleClass('fa-caret-right fa-caret-down');});});
</script><div class="project"><h4 class="link-toggle">Link 1</h4><div id="" class="content_toggle"><p>Hello world</p></div>
</div><div class="project"><h4 class="link-toggle">Link 2</h4><div id="" class="content_toggle"><p>Hello world</p></div>
</div>
DEMO: http://stackoverflow.com/questions/30932910/change-icons-when-toggle
参考:http://stackoverflow.com/a/30932938
jQuery 遍历 - closest() 方法
本例演示如何通过 closest() 完成事件委托。当被最接近的列表元素或其子后代元素被点击时,会切换黄色背景:
$( document ).bind("click", function( e ) {$( e.target ).closest("li").toggleClass("hilight");});
定义和用法
closest() 方法获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上。
详细说明
如果给定表示 DOM 元素集合的 jQuery 对象,.closest() 方法允许我们检索 DOM 树中的这些元素以及它们的祖先元素,并用匹配元素构造新的 jQuery 对象。.parents() 和 .closest() 方法类似,它们都沿 DOM 树向上遍历。两者之间的差异尽管微妙,却很重要:
.closest() | .parents() |
---|---|
从当前元素开始 | 从父元素开始 |
沿 DOM 树向上遍历,直到找到已应用选择器的一个匹配为止。 | 沿 DOM 树向上遍历,直到文档的根元素为止,将每个祖先元素添加到一个临时的集合;如果应用了选择器,则会基于该选择器对这个集合进行筛选。 |
返回包含零个或一个元素的 jQuery 对象 | 返回包含零个、一个或多个元素的 jQuery 对象 |
请看下面的 HTML 片段:
<ul id="one" class="level-1"><li class="item-i">I</li><li id="ii" class="item-ii">II<ul class="level-2"><li class="item-a">A</li><li class="item-b">B<ul class="level-3"><li class="item-1">1</li><li class="item-2">2</li><li class="item-3">3</li></ul></li><li class="item-c">C</li></ul></li><li class="item-iii">III</li>
</ul>
例子 1
假设我们执行一个从项目 A 开始的对 <ul> 元素的搜索:
$('li.item-a').closest('ul').css('background-color', 'red');
这会改变 level-2 <ul> 的颜色,这是因为当向上遍历 DOM 树时会第一个遇到该元素。
例子 2
假设我们搜索的是 <li> 元素:
$('li.item-a').closest('li').css('background-color', 'red');
这会改变列表项目 A 的颜色。在向上遍历 DOM 树之前,.closest() 方法会从 li 元素本身开始搜索,直到选择器匹配项目 A 为止。
例子 3
我们可以传递 DOM 元素作为 context,在其中搜索最接近的元素。
var listItemII = document.getElementById('ii'); $('li.item-a').closest('ul', listItemII).css('background-color', 'red'); $('li.item-a').closest('#one', listItemII).css('background-color', 'green');
以上代码会改变 level-2 <ul> 的颜色,因为它既是列表项 A 的第一个 <ul> 祖先,同时也是列表项 II 的后代。它不会改变 level-1 <ul> 的颜色,因为它不是 list item II 的后代。
参考:http://www.w3school.com.cn/jquery/traversing_closest.asp
本文转自:Bootstrap 3: 图标转换事件 Change icons when toggle
Bootstrap 3: 图标转换事件 Change icons when toggle相关推荐
- Bootstrap 字体图标 Bootstrap Glyphicon Components
基本用法: <p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span&g ...
- jQuery的事件change
人生还在继续,只有不断补充以前所不懂的知识,今天练习一个jQuery的事件change.这个事件是在对象失去focus并且原本值有所变化时就产生此事件. 如select时,用户所选择的选项有变时,或是 ...
- Bootstrap 字体图标Glyphicons
Bootstrap 提供了一个图片精灵,其中包含 140 个图标,这些图标可用于按钮.链接.导航和表单等元素.这些图标由 Glyphicons(http://glyphicons.com/)提供.如图 ...
- Image2icon for Mac(icns图标转换制作工具)
你是否想设置一款独特的图标呢?Image2icon Mac版是一款icns图标转换制作工具.用户可以随心制作属于自己的个性图标,还能对文件以及文件夹进行自定义的个性设置.Image2icon下载使用设 ...
- 将小图标转换成字体图标代码
将小图标转换成字体图标代码 转自:https://jingyan.baidu.com/article/ea24bc39ddff7bda62b331b0.html
- Bootstrap 字体图标和自定义矢量图标
一.Bootstrap 字体图标 Bootstrap包括250多个来自 Glyphicon Halflings 的字体图标. 使用:将图标类应用到这个 <span> 或者<i> ...
- 很不错的两款Bootstrap Icon图标选择组件
这篇文章主要介绍了不容错过的两款Bootstrap Icon图标选择组件,支持自定义的图标,拿出来分享下,绝对的干货,感兴趣的小伙伴们可以参考一下 一.Bootstrap icon picker组件 ...
- Svg 图标转换成Wpf path Geometry
Svg 图标转换成Wpf path Geometry 说明 转换步骤 注意 使用代码 效果 说明 其实是很简单的就可以完成的,那为何还要用一篇文章来记录.是因为自己粗心,在操作时少删除了一个 &quo ...
- bootstrap 文字图标 glyphicon class 不显示
关于bootstrap 文字图标 不显示问题 @font-face的使用 需要的文件(就是第二个 fonts) @font-face的使用 自己下载的bootstrap使用Notepad++打开发现没 ...
最新文章
- 无法在指定计算机上定位,Win10电脑无法打开定位功能时启动GeolocationService服务提示找不到文件怎么办...
- Flash数据的采集方法-搜房房价走势采集
- 在MATLAB中,用Simulink搭建一个二阶传递函数模型
- 职责链模式 php,php Chain of Responsibility 职责链模式
- sharepoint 2010 使用WinForm获取 SPSite对象
- 简单点赞效果html,js实现点赞效果
- equals null报错吗_轻轻松松教你搞定Java中的==和equals
- Request中的方法调用
- Git error. Command: `git ls-files --cached --exclude-standard --recurse-submodules`
- python函数介绍
- 2021年贵金属黄金会迎来大行情吗?
- java发送接收组播(多播)数据包(UDP包)
- 方法同时使用微服务调用文件上传方法以及调用另一微服务的方法时报错failed to parse multipart servlet Request
- asp版的简单留言板
- Linux卸载打印机驱动,Ubuntu下安装打印机驱动(两种方法)
- mac top内存 cpu
- ppt制作弹跳的小球动画效果_PPT动画制作教程:小球弹跳动画
- linux上java设置内存,linux 设置java内存
- 4-渔夫打鱼晒网问题
- Python CT图像预处理——nii格式读取、重采样、窗宽窗位设置