<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>点击查看 收起</title>

    <script src="js/jquery-1.7.1.min.js"></script>

</head>

<style>

    .abc{width: 150px;height: 150px;background: red;}

    .fff{font-size: 18px;color: blue;}

    .big-box{background: #888;}

    .pink{

        width: 150px;

        height: 100px;

        background: pink;

        position: absolute;

        margin: auto;

        left: 0;

        right: 0;

        bottom: 0;

        top: 0;

        transform: rotate(80deg);

        text-align: center;

        line-height: 100px;

    }

    .fff{

        background: #fff;

        border: 1px solid #000;

    }

    .head{line-height: 30px;}

    .arrow{width: 20px;height: 20px;background: red;display: block;float: right;}

.show_hide_btn{line-height: .64rem;font-size: .28rem;color: #4c4c4c;text-align: center;}

.show_hide_btn i{display: inline-block;width: 50px;height:50px;vertical-align: top;margin-top: .18rem;margin-left: .1rem;

 background: url(img/fold_t.png) no-repeat center #fe3837;background-size: 30px auto;border-radius: 50%;    box-shadow: 0 5px 15px 0 rgba(0,0,0,.14);}

.show_hide_btn i.flod_t{background: url(img/fold_t.png) no-repeat center #fe3837; background-size: 30px auto;transform:rotate(180deg);

-ms-transform:rotate(180deg);     /* IE 9 */

-moz-transform:rotate(180deg);     /* Firefox */

-webkit-transform:rotate(180deg); /* Safari 和 Chrome */

-o-transform:rotate(180deg); }

</style>

<script>

    $(document).ready(function() {

 var le = $('div.coup_list').length;

if(le >1){

$('.show_hide_btn').css('display','block');

  $('.coup_list:gt(0)').css('display','none');

}

$('.show_hide_btn').toggle(function(){

    $('.coup_list:gt(0)').show();

    $('.show_hide_btn i').addClass('flod_t');

    $('.show_hide_btn span').html('收起')

}

    ,function(){

        $('.coup_list:gt(0)').hide();

        $('.show_hide_btn i').removeClass('flod_t');

        $('.show_hide_btn span').html('点击查看');

})

    });

</script>

<body>

<div class="coup">

    <div class="coup_list">111</div>

    <div class="coup_list">44445</div>

    <div class="coup_list">5675</div>

    <div class="coup_list">ertyr</div>

    <div class="coup_list">ertyer</div>

    <div class="coup_list">ertye</div>

    <div class="coup_list">etryefsdfr</div>

    <div class="show_hide_btn" style="display:none" ><span>点击查看全部券码 </span><i class=""></i></div>

</div>

</body>

</html>

jQuery 点击查看 收起的更多相关文章

  1. jquery 点击查看，收起特效

    <div class="all"> <p><a href="javascript:;" id="onvk"&g ...

  2. jquery 点击查看更多箭头变化，文字变化,超出带滚动条。

    从网上好了好久,没找到自己要的,自己写了一下. <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...

  3. jQuery点击图片放大拖动查看效果

    效果如图: 放大前: 放大后(可拖动图片浏览): 源码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head& ...

  4. JS点击查看更多内容 控制段落文字展开折叠

    JavaScript+jQuery实现的文字展开折叠效果,点击文字后文字内容会完整的显示出来,控制段落来显示文字,不需要的时候,可以再次点击后将内容折叠起来,也就是隐藏了一部分内容.点击查看更多的功能 ...

  5. jquery点击放大图片

    参考地址:https://blog.csdn.net/qq_42249896/article/details/86569636 一.应用场景:点击图片可以对图片进行放大显示. 二.实现代码: 说明:我 ...

  6. jquery点击复选框触发事件给input赋值

    体验效果:http://keleyi.com/keleyi/phtml/jqtexiao/31.htm 代码如下: <!DOCTYPE html> <html xmlns=" ...

  7. 基于jQuery点击加载动画按钮特效

    分享一款基于jQuery点击加载动画按钮特效.这是一款基于jQuery+CSS3实现的鼠标点击按钮加载动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  8. jquery点击改变图片src源码并toggle

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. jquery点击改变class并toggle；jquery点击改变图片src源码并toggle；jquery显示隐藏toggle

    <html><head><meta charset="utf-8"><title></title><script ...

随机推荐

  1. spring 简述

    Spring的发展 1.1. Spring1.x 时代 在Spring1.x时代,都是通过xml文件配置bean,随着项目的不断扩大,需要将xml配置分放到不同的配置文件中,需要频繁的在java类和x ...

  2. 文件上传Apache

    Map<String, Object> rtnMap = new HashMap<String, Object>(); // 获取文件 String tempPath = re ...

  3. 【转】Android性能优化之GPU过度绘制与图形渲染优化

    标签: android / 优化 / 过度绘制 / 图形渲染优化 Android之GPU过度绘制与图形渲染优化 写在前面的话 本文主要对过度绘制和图形渲染做一个概念性的描述,和简单的优化措施. 如果你 ...

  4. linux下修改apache，nginx服务端口号

    一.linux下修改apache端口号 yum安装后,apache配置文件: /etc/httpd/conf/httpd.conf 找到apache目录下的 httpd.conf, 使用vi 打开,找 ...

  5. 一:网络--HTTP协议

    一.URL 1.基本介绍 URL的全称是Uniform Resource Locator(统一资源定位符) 通过1个URL,能找到互联网上唯一的1个资源 URL就是资源的地址.位置,互联网上的每个资源 ...

  6. bzoj1878 [SDOI2009]HH的项链——树状数组

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1878 离线树状数组,巧妙的思路呢: 给每种项链记录一个最后出现的位置lst,根据项链最后出现 ...

  7. bzoj 2733: [HNOI2012]永无乡【并查集+权值线段树】

    bzoj上数组开大会T-- 本来想用set瞎搞的,想了想发现不行 总之就是并查集,每个点开一个动态开点的权值线段树,然后合并的时候把值并在根上,询问的时候找出在根的线段树里找出k小值,看看这个值属于哪 ...

  8. python爬虫爬取汽车页面信息，并附带分析（静态爬虫）

    环境: windows,python3.4 参考链接: https://blog.csdn.net/weixin_36604953/article/details/78156605 代码:(亲测可以运 ...

  9. SqlParameter 的使用

    SqlParameter[] sqlParams = new SqlParameter[2];sqlParams[0] = new SqlParameter("@RoleId", ...

  10. 【CSS】少年，你想拥有写轮眼么？

    最近笔者在公司内部开展了一次CSS讲座,由于授课经验不太足,授课效果自我感觉并不太好,不过课中有一个笔者用CSS写的一个小效果,其中还是包含了蛮多CSS的常见知识点的,正好也有部分同学很感兴趣如何实现 ...