基于jQuery实现收缩展开功能


Posted in Javascript onMarch 18, 2016

本文实例向大家分享了一款基于jQuery实现收起展开功能特效,供大家参考,具体内容如下

效果图:

基于jQuery实现收缩展开功能

点击倒三角可以进行展开操作

具体代码:

<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>jQuery实现收起展开功能 - 何问起</title><base target="_blank" />
<meta charset="utf-8" />
<style>
a{color:darkgreen}
.hovertreeContent{width:300px;text-indent:2em;margin:5px auto;height:60px;overflow:hidden;position:relative;border:1px solid silver;}
.hewenqiToggle{height:20px;background-color:#f0f0f0;border-top:1px solid silver;position:absolute;bottom:0px;width:100%;}
.triangle-down-hovertree { width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 16px solid #999;position:absolute;right:0px;left:0px;margin:0px auto; top:2px;cursor:pointer;}
.triangle-up-hovertree { width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 16px solid #999; position:absolute;right:0px;left:0px;margin:0px auto;top:2px; }
</style>
<script src="http://hovertree.com/ziyuan/jquery/jquery-1.12.1.min.js"></script>
 
</head>
<body>
<div style="width:730px;margin:0px auto;text-align:center;">
<h2>jQuery实现收起展开功能</h2>
<a href="#">原文</a> <a href="#">首页</a> <a href="#">特效</a>
</div>
<div class="hovertreeContent">
受到网店的影响,服装店的生意逐渐有所下降,老板找何问起去谈,大概是准备跟上网购潮流,让何问起准备一下,
要在网上开网店,要为服装店建立网站。
何问起也没说自己经验不足,只说会积极准备。于是抓紧时间查找资料,学习练习。
<div class="hewenqiToggle"><span class="triangle-down-hovertree"></span></div>
</div>
<script>
$(".hewenqiToggle").on("click", function () {
if ($(".hewenqiToggle").css('position') == "absolute") {
$(".hovertreeContent").height("auto");
$(".hewenqiToggle").css({ "position": "relative" });
$(".hewenqiToggle").find("span").removeClass('triangle-down-hovertree').addClass('triangle-up-hovertree');
}
else
{
$(".hovertreeContent").height("60");
$(".hewenqiToggle").css({ "position": "absolute" });
$(".hewenqiToggle").find("span").removeClass('triangle-up-hovertree').addClass('triangle-down-hovertree');
}
})
</script>
</body>
</html>

以上就是本文的全部内容,希望对大家学习jquery程序设计有所帮助。

Javascript 相关文章推荐
添加JavaScript重载函数的辅助方法2
Jul 04 Javascript
浅析JavaScript中的事件机制
Jun 04 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
Sep 10 Javascript
详谈js中数组(array)和对象(object)的区别
Feb 27 Javascript
vue-resource 拦截器(interceptor)的使用详解
Jul 04 Javascript
Angular2开发环境搭建教程之VS Code
Dec 15 Javascript
vue element-ui之怎么封装一个自己的组件的详解
May 20 Javascript
JavaScript日期库date-fn.js使用方法解析
Sep 09 Javascript
react ant Design手动设置表单的值操作
Oct 31 Javascript
基于Vue+Webpack拆分路由文件实现管理
Nov 16 Javascript
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
React配置子路由的实现
Jun 03 Javascript
基于javascript显示当前时间以及倒计时功能
Mar 18 #Javascript
jQuery.deferred对象使用详解
Mar 18 #Javascript
JS中的二叉树遍历详解
Mar 18 #Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
Mar 18 #Javascript
Javascript的表单验证-揭开正则表达式的面纱
Mar 18 #Javascript
Javascript的表单验证-初识正则表达式
Mar 18 #Javascript
Javascript的表单验证-提交表单
Mar 18 #Javascript
You might like
php处理json格式数据经典案例总结
2016/05/19 PHP
PHP自定义错误用法示例
2016/09/28 PHP
PHP版微信小店接口开发实例
2016/11/12 PHP
php生成二维码图片方法汇总
2016/12/17 PHP
基于thinkPHP类的插入数据库操作功能示例
2017/01/06 PHP
thinkPHP通用控制器实现方法示例
2017/11/23 PHP
JS 统计时间
2021/03/09 Javascript
收集json解析的四种方法分享
2014/01/17 Javascript
纯css+js写的一个简单的tab标签页带样式
2014/01/28 Javascript
js跨域问题浅析及解决方法优缺点对比
2014/11/08 Javascript
本人自用的global.js库源码分享
2015/02/28 Javascript
基于javascript实现九九乘法表
2016/03/27 Javascript
js判断输入字符串是否为空、空格、null的方法总结
2016/06/14 Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
2018/03/12 Javascript
微信小程序修改swiper默认指示器样式的实例代码
2018/07/18 Javascript
es6 symbol的实现方法示例
2019/04/02 Javascript
vue.js的状态管理vuex中store的使用详解
2019/11/08 Javascript
原生js+canvas实现贪吃蛇效果
2020/08/02 Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
2020/10/27 Javascript
[46:25]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第二局
2016/03/05 DOTA
[41:11]完美世界DOTA2联赛PWL S2 Inki vs Magma 第一场 11.22
2020/11/24 DOTA
python 链接和操作 memcache方法
2017/03/04 Python
Python编写登陆接口的方法
2017/07/10 Python
Python列表切片操作实例总结
2019/02/19 Python
Python内置函数locals和globals对比
2020/04/28 Python
Python检测端口IP字符串是否合法
2020/06/05 Python
python实现画图工具
2020/08/27 Python
python中字典增加和删除使用方法
2020/09/30 Python
工程造价专业大专生求职信
2013/10/06 职场文书
高级销售员求职信
2013/10/25 职场文书
实习单位接收函
2014/01/11 职场文书
工程催款通知书
2015/04/17 职场文书
同学聚会通知短信
2015/04/20 职场文书
幼儿园教师师德师风承诺书
2015/04/28 职场文书
新教师教学工作总结
2015/08/12 职场文书
幼儿教师师德培训心得体会
2016/01/09 职场文书