<!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. Enterprise Architect 生成项目类图

    Enterprise Architect使用教程: https://blog.csdn.net/chenglc1612/article/details/81083151 主要流程 --到此-自动生成完 ...

  2. YTU 2894: G--我要去内蒙古大草原

    2894: G--我要去内蒙古大草原 时间限制: 1 Sec  内存限制: 128 MB 提交: 162  解决: 8 题目描述 春天到了,小明想要从烟台开车去内蒙古大草原放松一下,这两地的距离是14 ...

  3. Java抽象类和接口的区别(好长时间没看这种文章了)

    Java抽象类和接口的区别(好长时间没看这种文章了) abstract class和interface是Java语言中对于抽象类定义进行支持的两种机制,正是由于这两种机制的存在,才赋予了Java强大的 ...

  4. BZOJ_2118_墨墨的等式_最短路

    BZOJ_2118_墨墨的等式_最短路 Description 墨墨突然对等式很感兴趣,他正在研究a1x1+a2y2+…+anxn=B存在非负整数解的条件,他要求你编写一个程序,给定N.{an}.以及 ...

  5. linux内存管理之uboot第一步

    在进入讲解linux内存管理的kernel阶段以前,了解一下uboot阶段是如何准备好内存物理设备的,这是非常有意义的.通常进入到linux内核阶段之后,对内存芯片的物理特性寄存器访问是比较少的,强调 ...

  6. CentOS 6.6实现永久修改DNS地址的方法

    本文实例讲述了CentOS 6.6实现永久修改DNS地址的方法. 百牛信息技术bainiu.ltd整理发布于博客园 分享给大家供大家参考,具体如下:1.配置ip地址文件 /etc/sysconfig/ ...

  7. JAVA数据类型提升

    在java中数值进行计算事会自动进行数据类型提升,例如:计算时byte,short,char类型会提升为int数据类型. 例1: class dataType { public static void ...

  8. bzoj 4184: shallot【线性基+时间线段树】

    学到了线段树新姿势! 先离线读入,根据时间建一棵线段树,每个节点上开一个vector存这个区间内存在的数(使用map来记录每个数出现的一段时间),然后在线段树上dfs,到叶子节点就计算答案. 注意!! ...

  9. Luogu P1330 封锁阳光大学【Dfs】 By cellur925

    题目传送门 这道题我们很容易去想到二分图染色,但是这个题好像又不是一个严格的二分图. 开始的思路:dfs每个点,扫与他相邻的每个点,如果没访问,染相反颜色:如果访问过,进行检查,如果不可行,直接结束程 ...

  10. Android 插件技术：动态加载dex技术初探

    1.Android动态加载dex技术初探 http://blog.csdn.net/u013478336/article/details/50734108 Android使用Dalvik虚拟机加载可执 ...