代码:
<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 树向上遍历。两者之间的差异尽管微妙,却很重要:
从当前元素开始 | 从父元素开始 |
沿 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
相关推荐
Bootstrap5图标库bootstrap-icons是前端开发中一个非常实用的资源,它为开发者提供了大量美观、一致的SVG图标,可以方便地集成到Bootstrap5项目中,为网页设计增添丰富的视觉元素。Bootstrap图标库的设计理念是简洁...
Bootstrap Icons:Bootstrap 有史以来第一次拥有自己的图标库,并且是专门为 Bootstrap 的组件和文档定制开发的。 Bootstrap Icons 的设计初衷是与 Bootstrap 组件配合使用,从表单到导航组件等。Bootstrap Icons ...
React Bootstrap图标 全新的用作React组件。 当前v1.3.0,有1265个图标! 安装 npm install react-bootstrap-icons --save 要么 yarn add react-bootstrap-icons 用法 import React from ' react ' ; import { ...
3. jQuery库的应用,包括事件处理和DOM操作。 4. 使用CSS、JavaScript和HTML协同工作来创建交互式用户体验。 通过这个练习,你可以深入理解Bootstrap模态框的工作原理,并学会如何结合HTML5和jQuery来创建一个功能...
3. **LESS**:Bootstrap的源码基于LESS预处理器编写,允许开发者更灵活地自定义和扩展Bootstrap样式。如果你需要深度定制Bootstrap,可以修改LESS文件然后编译成CSS。 4. **Font Awesome**:Bootstrap图标通常来自...
在开发Web应用时,Bootstrap框架为我们提供了丰富的UI组件和图标资源。然而,有时在本地环境中引入Bootstrap文件时,可能会遇到字体图标无法显示的问题。本文将深入探讨这个问题的原因及解决方法。 首先,我们要...
bootstrap 图标引入,直接把这个包放到入口文件夹下,在视图文件中引入就可以了。 ('font/bootstrap-icons.min.css') }}" rel="stylesheet"> <i class="bi-alarm"></i> <i class="bi bi-wechat"></i>
Bootstrap开源的SVG图标库,此图标库起初专门针对其从表单控件到导航等组件和文档进行定制设计和构建,现在可以免费用于任何项目,无论此项目是否使用了Bootstrap。 Bootstrap Icons是SVG图标库,因此它们可以快速...
在这个特定的资源中,我们关注的是"Bootstrap带图标的按钮样式",这是一种利用Bootstrap基础按钮类并结合CSS3技术来创建带有图标且具有交互效果的按钮。 首先,Bootstrap按钮的基础样式是通过其预定义的CSS类实现的...
Bootstrap4 是在 2015 年也就是 Bootstrap 四周年之际推出的新的前端框架,在 Bootstrap3 的基础上,对 Bootstrap 做出了一些相应的改变。 Bootstrap 下载和引入 Bootstrap 提供了三种下载的样式生产环境开发包:...
Bootstrap Toggle Buttons是一款基于Bootstrap框架的插件,用于创建美观、交互性强的切换按钮。这款插件使得在网页设计中添加开关、选项等控制元素变得更加简便。Bootstrap Toggle Buttons提供了丰富的自定义选项,...
Bootstrap图标Vue Bootstrap图标旨在与Bootstrap组件一起使用,从表单控件到导航。 但是,它们也可以在几乎任何项目中工作。 这是因为Bootstrap图标是SVG,因此它们可以快速轻松地缩放并可以使用CSS设置样式。 -该...
Vue引导程序图标 一个Vue.js组件,用于通过SVG sprite方法呈现。 对于该组件的Vue 3版本,请查看 。 安装 npm install --save @dvuckovic/vue-bootstrap-icons 用法 全局组件注册: import Vue from 'vue' ; ...
2. CSS3: Bootstrap广泛使用CSS3特性,如媒体查询、过渡效果和动画,以实现响应式设计和丰富的视觉效果。 3. Sass: Bootstrap4及以上版本采用Sass预处理器,提供更强大的样式管理,如变量、嵌套规则和混合功能。 4. ...
Bootstrap Icons开源SVG图标库v1.3.0是一款广受欢迎的图标资源库,它为开发者提供了大量的SVG矢量图标,适用于网页设计和前端开发。这个版本的更新可能包含新的图标设计、性能优化或其他功能增强,使得它更加灵活和...
1. IconPark IconPark 提供超过 2400 个高质量图标,还提供了每个图标的含义和来源的描述,便于开发者使用。除此之外,该网站还可以自定义图标,这是与其他图标网站与众不同的地方。...Bootstrap Icons
Bootstrap Icons 是一个由Bootstrap团队开发的开源SVG图标库,版本为v1.11.3。这个库提供了大量高质量的矢量图标,适用于各种Web设计和开发项目,为界面增添视觉吸引力并提升用户体验。Bootstrap Icons的特点包括...
在这个特定的资源中,我们关注的是"Bootstrap网页loading加载图标动画特效",这是一种利用Bootstrap框架和CSS3技术来创建吸引用户注意力的加载指示器的方法。 首先,加载图标(Loading Icon)在网页设计中扮演着至...
**dtree插件Bootstrap风格图标详解** 在网页开发中,数据结构的展示往往需要借助于各种插件,其中dtree是一款常见的JavaScript实现的树形插件。它能够帮助开发者将层次化数据以清晰的树状结构呈现出来。然而,原生...