<!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. POJ3264 Balanced Lineup —— 线段树单点更新 区间最大最小值

    题目链接:https://vjudge.net/problem/POJ-3264 For the daily milking, Farmer John's N cows (1 ≤ N ≤ 50,000 ...

  2. YTU 1011: Rails

    1011: Rails 时间限制: 1000 Sec  内存限制: 64 MB 提交: 16  解决: 9 题目描述 There is a famous railway station in PopP ...

  3. 377D

    树形dp 就是求每个点到标记的点的最大距离 一个经典模型 有一个巧妙的方法,我们求出以这些关键点的直径,然后每个点到关键点的最大距离就是到直径两端的距离 #include<bits/stdc++ ...

  4. eclipse下清除项目的svn信息

    点击项目右键->Team->Disconnect 选择第一个即可

  5. 工作日记：C#获取操作系统、MAC地址、登录用户、网卡、物理内存信息

    /// <summary> /// 操作系统的登录用户名 /// </summary> /// <returns>系统的登录用户名</returns> ...

  6. Akka源码分析-CircuitBreaker（熔断器）

    熔断器,在很多技术栈中都会出现的一种技术.它是在分布式系统中提供一个稳定的阻止嵌套失败的机制. 该怎么理解呢?简单来说,在分布式环境中,如果某个计算节点出现问题,很容易出现失败的逆向传到或整个系统的雪 ...

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

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

  8. Python测试工具——nose

    1.nose 特点: a)         自动发现测试用例(包含[Tt]est文件以及文件包中包含test的函数) b)         以test开头的文件 c)         以test开头的 ...

  9. Lightoj 1071 - Baker Vai （双线程DP）

    题目连接: http://lightoj.com/volume_showproblem.php?problem=1071 题目大意: 一个n*m的格子,Baker Vai要从(1,1)到(n,m)再回 ...

  10. _bzoj1497 [NOI2006]最大获利【最大权闭合子图】

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=1497 保存最大流模版. 选一个用户群,就必须要选对应的两个中转站,这种关系类似“最大全闭合子 ...