基于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 相关文章推荐
常用参考资料(手册)下载或者链接
Jul 22 Javascript
jquery创建一个新的节点对象(自定义结构/内容)的好方法
Jan 21 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
Dec 24 Javascript
js实现鼠标悬浮给图片加边框的方法
Jan 30 Javascript
使用jquery实现仿百度自动补全特效
Jul 23 Javascript
jquery制做精致的倒计时特效
Jun 13 Javascript
javascript中href和replace的比较(详解)
Nov 25 Javascript
你可能不知道的前端算法之文字避让(inMap)
Jan 12 Javascript
使用vue-cli打包过程中的步骤以及问题的解决
May 08 Javascript
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
Aug 06 Javascript
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
基于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学习笔记之 函数声明(二)
2011/06/09 PHP
header跳转和include包含问题详解
2012/09/08 PHP
php汉字转拼音的示例
2014/02/27 PHP
php遍历文件夹和文件列表示例分享
2014/03/11 PHP
实现在同一方法中获取当前方法中新赋值的session值解决方法
2014/06/26 PHP
ThinkPHP的MVC开发机制实例解析
2014/08/23 PHP
php常用hash加密函数
2014/11/22 PHP
YII Framework教程之异常处理详解
2016/03/14 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
JavaScript 使用技巧精萃(.net html
2009/04/25 Javascript
WordPress 照片lightbox效果的运用几点
2009/06/22 Javascript
javascript是怎么继承的介绍
2012/01/05 Javascript
jquery导航制件jquery鼠标经过变色效果示例
2013/12/05 Javascript
调用jQuery滑出效果时闪烁的解决方法
2014/03/27 Javascript
基于jQuery实现网页进度显示插件
2015/03/04 Javascript
JS动态改变浏览器标题的方法
2016/04/06 Javascript
完美实现八种js焦点轮播图(下篇)
2020/04/20 Javascript
两行代码轻松搞定JavaScript日期验证
2016/08/03 Javascript
jQuery源码分析之init的详细介绍
2017/02/13 Javascript
基于node.js实现微信支付退款功能
2017/12/19 Javascript
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
2018/03/06 Javascript
解决vue+router路由跳转不起作用的一项原因
2020/07/19 Javascript
Javascript如何递归遍历本地文件夹
2020/08/06 Javascript
[03:55]显微镜下的DOTA2特别篇——430灰烬之灵神级操作
2014/06/24 DOTA
Python编程中实现迭代器的一些技巧小结
2016/06/21 Python
Python Pandas批量读取csv文件到dataframe的方法
2018/10/08 Python
windows7 32、64位下python爬虫框架scrapy环境的搭建方法
2018/11/29 Python
浅谈Python爬虫基本套路
2019/03/25 Python
python找出一个列表中相同元素的多个索引实例
2019/06/11 Python
使用python进行广告点击率的预测的实现
2019/07/04 Python
python3爬虫GIL修改多线程实例讲解
2020/11/24 Python
如何通过Python实现RabbitMQ延迟队列
2020/11/28 Python
css3实现元素环绕中心点布局的方法示例
2019/01/15 HTML / CSS
法定代表人授权委托书
2014/09/19 职场文书
在Windows下安装配置CPU版的PyTorch的方法
2021/04/02 Python
python开发的自动化运维工具ansible详解
2021/08/07 Python