jQuery实现展开伸缩效果

jQuery实现简单的展开伸缩效果

展开伸缩效果不论是在电脑上还是在手机端都应用的十分广，那么今天就实现一个这样的效果，首先贴下图

展开之前的样子

展开之后的样子

好了，下面开始写实现过程了

1.首先将页面的结构写出来，结构比较简单，就不多说了

<div class="m-box"><div class="m-list">点击试一下，会出现什么呢？<div class="icon-list"></div></div><!-----------展开的内容----------><div class="m-content"><small>哈哈，看到我了吧；</small><br><small>哎呦，不错哦；</small><br><small>哈哈哈哈哈哈哈哈哈哈哈哈哈哈。</small></div><!-----------展开的内容 End----------><br><hr><br><div class="m-list">点击我可以展开哦<div class="icon-list"></div></div><!-----------展开的内容----------><div class="m-content"><small>展开内容1</small><br><small>呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵；</small><br><small>嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻</small></div><!-----------展开的内容 End----------></div>

2.写好css样式，这里面要注意的就是.active了，用来切换图标用的，后面介绍它的用法

*{margin: 0;padding: 0}
body{margin: 100px;
}.m-box{width: 80%;background-color: #c1e2b3;padding: 20px;overflow: hidden;
}
.m-list{height: 48px;line-height: 48px;cursor: pointer;
}.icon-list{width: 48px;height: 48px;float: right;background-image: url("../images/iconfont-right.png") ;cursor: pointer;
}hr{width: 100%;height: 1px;border: none;border-bottom: 1px solid #888;
}.m-content{display: none;
}.active{background-image: url("../images/iconfont-unfold.png") ;
}

3.最重要的步骤来了，通过jQuery来完成这种效果，切换图标这里介绍两种不同的方法

首先看一下主要的函数

$(function () {var icon=$('.icon-list');$('.m-list').click(function () {$(this).next('div').slideToggle();changeIcon($(this).children(icon));});});

这里通过点击m-list这个类完成两个动作，展开收缩效果和图标的切换。展开收缩主要用到了jQuery的slide动画，通过slideToggle（）方法实现。然后是切换图标，我这里写了两个方法，分别介绍下。

第一种方法，通过indexof（）函数实现

function changeIcon(mainNode) {if (mainNode) {if (mainNode.css("background-image").indexOf("iconfont-right.png") >= 0) {mainNode.css("background-image","url('images/iconfont-unfold.png')");} else {mainNode.css("background-image","url('images/iconfont-right.png')");}}}

这是什么意思呢？indexOf（） 方法可返回某个指定的字符串值在字符串中首次出现的位置。字符串位置是从0开始的，如果要检索的字符串值没有出现，则该方法返回 -1。
比如：

var str="hello world";alert(str.indexOf('hello'));  //返回0alert(str.indexOf('world'));  //返回6，注意：从0开始计算，空格算一个字符alert(str.indexOf('helloworld'));//返回-1，因为str中不包含该字符串

好了，利用indexof（）的这种特性就可以完成我们的需求了。首先background-image的值是iconfont-right.png，所以返回的值是0，执行 mainNode.css(“background-image”,”url(‘images/iconfont-unfold.png’)”);这句话，切换背景图片。当背景改为iconfont-unfold.png后，返回的值是-1，执行下面一句话，又将背景切换回去，就可以完成一直这样不停的切换效果了。

第二种方法，利用三目运算符和css结合使用，达到切换的效果

function changeIcon2(mainNode){if(mainNode){var _active=mainNode.hasClass('active');_active?mainNode.removeClass('active'):mainNode.addClass('active');}}

前面说到的active类在这里起到了很大的作用。.icon-list这个类中开始没有active类，执行mainNode.addClass(‘active’);这句话，为它添加active这个类

.active{background-image: url("../images/iconfont-unfold.png") ;
}

应用该样式后覆盖它本身的样式，改变图标。当它有active这个类之后，点击执行mainNode.removeClass(‘active’)；这句话，移除掉active这个类，以达到切换图标的效果。

总结：虽然这种效果实现过程蛮简单的，但是方法有很多种，试着自己去想一想不同的方法来实现还是蛮有乐趣的，最后附上Demo的下载地址：

http://download.csdn.net/detail/a46262563/8999937

jQuery实现展开伸缩效果相关推荐

html5伸缩效果,【HTML5】Jquery打造竖向伸缩/展开菜单
该楼层疑似违规已被系统折叠隐藏此楼查看此楼效果图如下: jquery打造竖向伸缩/展开菜单 body { font-family: Arial; font-size: 16px; } dl { w ...
vue伸缩效果_Vue.js - 元素展开、收起动画效果组件（附：二级菜单的展开、收缩动画效果）...
子菜单的展开.收缩功能在许多系统上都很常见,如果想要在打开收起时带有动画效果,过去常常会通过 jQuery 实现.而在 Vue 项目中,我们可以单独封装一个动画组件,方便使用. 1,效果图点击一级菜 ...
html 传参数菜单自动展开,【HTML5】Jquery打造竖向伸缩/展开菜单
该楼层疑似违规已被系统折叠隐藏此楼查看此楼效果图如下: jquery打造竖向伸缩/展开菜单 body { font-family: Arial; font-size: 16px; } dl { w ...
jQuery 设计和自定义一个带展开动画效果的导航栏
设计和自定义一个带展开动画效果的导航栏,尝试写了一个demo,加上设计和调试差不多写了一天吧. 这里就来讲讲如何从设计->写布局->写样式->写JS代码完成一个完全自己设计的导航栏 ...
js 展开折叠动画原理，jquery的toggle切换效果
效果图: 想法: jquery的展开折叠动画效果很好看,想自己实现一个,结果发现仅仅只靠css添加类和动画是不行,最开始的思路是折叠时候设置高度为0,展开时设置高度设置为auto,让他自己撑开,可是t ...
android oboe 混音_Android之AppBarLayout实现悬停吸附伸缩效果
前几天看到这样一个UI效果,然后自己也仿照实现了下: 开眼app个人中心看着挺酷的,也有很多App都用到了这个UI效果,比如开眼App和沪江开心词场就用到了. 所以下面就来简单实现一下这个UI效果吧 ...
使用 Sticky-Kit 实现基于 jQuery 的元素固定效果
元素固定效果在网页中应用得很多,比较常见的使用场景有改进导航,显示广告.Sticky-Kit 是一个非常方便的 jQuery 插件,简化了创建/管理粘元素,有复杂的使用功能.这些功能包括:处理多个固定 ...
php生成文字闪烁,如何用jquery实现闪烁文字效果
用jquery实现闪烁文字效果的方法:首先获取到最新一条记事的pid,并在添加成功后来闪动这条记事:然后闪动的方法可以写到函数里,直接调用:最后有闪动就要有定时器,开启定时器即可. 本教程操作环境:w ...
html用jq设置动态效果,jQuery实现基本动画效果的方法详解
本文实例讲述了jQuery实现基本动画效果的方法.分享给大家供大家参考,具体如下: animate()方法用于创建自定义动画语法: $(selector).animate({params},spee ...

jQuery实现展开伸缩效果

jQuery实现简单的展开伸缩效果

jQuery实现展开伸缩效果相关推荐

最新文章

热门文章