<!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. android8 Notification

     界面Layout:  customnotice.xml <?xml version="1.0" encoding="utf-8"?> <Li ...

  2. HttpServlet容器响应Web客户流程

    HttpServlet容器响应Web客户请求流程如下: 1)Web客户向Servlet容器发出Http请求: 2)Servlet容器解析Web客户的Http请求: 3)Servlet容器创建一个Htt ...

  3. NDK编程中如何在C文件中打印调试信息

      1,在Android.mk文件中加上 LOCAL_LDLIBS := -L$(SYSROOT)/usr/lib -llog LOCAL_PATH := $(call my-dir)include ...

  4. 在 linux 下使用 CMake 构建应用程序【转】

    本文转载自:https://www.ibm.com/developerworks/cn/linux/l-cn-cmake/index.html CMake 简介 CMake 是一个跨平台的自动化建构系 ...

  5. HDU1069 Monkey and Banana —— DP

    题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=1069 Monkey and Banana Time Limit: 2000/1000 MS ...

  6. qemu-kvm磁盘读写的缓冲(cache)的五种模式

    qemu-kvm磁盘读写的缓冲(cache)模式一共有五种,分别是writethrough, wirteback, none, unsafe, directsync当你对VM读写磁盘的性能有不同的要求 ...

  7. win7上安装macaca的报错问题

    macaca网上的各种教程中,都建议使用淘宝源安装macaca,使用淘宝源就需要先安装cnpm,在win7上切换到淘宝源安装cnpm后(npm install -g cnpm --registry=h ...

  8. Uncaught ReferenceError: is not defined

    今天,遍历一个HashSet集合对象,想用链接绑定集合对象的值,通过POST方式提交到控制器.结果程序无反应,按F12键进入调试模式,谷歌总是提示Uncaught ReferenceError:   ...

  9. 洛谷P3833 [SHOI2012]魔法树（树链剖分）

    传送门 树剖板子…… 一个路径加和,线段树上打标记.一个子树询问,dfs的时候记录一下子树的区间就行 // luogu-judger-enable-o2 //minamoto #include< ...

  10. 安装privoxy后curl 操作

    如果讲privoxy服务关掉 sudo /etc/init.d/privoxy restart 这时候发现 curl www.baidu.com 也没法正常工作,直接显示的是无法连接到相应端口还是 主 ...