<!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. UITabBarController简单介绍

    一.简单介绍 UITabBarController和UINavigationController类似,UITabBarController也可以轻松地管理多个控制器,轻松完成控制器之间的切换,典型的例 ...

  2. 并不对劲的bzoj2638

    为了反驳很对劲的太刀流,并不对劲的片手流决定与之针锋相对. 很对劲的太刀流-> 2638: 黑白染色 Time Limit: 20 Sec  Memory Limit: 256 MBSubmit ...

  3. 【196】Dell 移动工作站系统安装方法

    会出现找不到硬盘的情况,解决方法:安装系统的时候需要加载阵列卡驱动 下载阵列卡驱动,以 Dell T7610 为例根据安装系统进行选择,地址:http://zh.community.dell.com/ ...

  4. 【135】NoteExpress使用中的问题

    NoteExpress主要是用来管理文献,然后可以方便管理,方便插入,各种方便吧! 关于NoteExpress的下载可以直接搜索进入官网下载,为了不用破解之类的,可以选择大学版的! 引文显示上标!ht ...

  5. Ruby module里的self

    创建: 2018/03/15 更新: 2018/03/22 把标题ruby首字母大写 都知道def self.方法名 来定义类方法 class SampleClass def self.class_m ...

  6. Postgresql空库发布或者部分空库，模式，表处理备份流程

    --备份数据库结构pg_dump -h localhost -p 8101 -d qhsoam -s -f /tmp/nodata.sql --仅备份某模式和该模式下的数据表结构pg_dump -h ...

  7. HDU3949:XOR（高斯消元）（线性基）

    传送门 题意 给出n个数,任意个数任意数异或构成一个集合,询问第k大个数 分析 这题需要用到线性基,下面是一些资料 1.高斯消元&线性基&Matirx_Tree定理 笔记 2.关于线性 ...

  8. Linux 常用命令十 which cal date

    一.which命令 查找一个目录所在的路径: wang@wang:~/workpalce/python$ which ls /bin/ls 二.cal命令 wang@wang:~/workpalce/ ...

  9. jrebel永久免费使用教程，这个标题怎么样？不能带“激活”俩字？

    文章转载自:https://www.jiweichengzhu.com/article/33c0330308f5429faf7a1e74127c9708 如果还有问题,加群交流:686430774(就 ...

  10. SolrCloud索引富文本数据

    solrconfig配置文件: schema配置文件: 执行目录: /opt/solr-5.5.4/server/scripts/cloud-scripts -- 下载配置文件 ./zkcli.sh ...