zoukankan      html  css  js  c++  java
  • js 实现简单收起功能

    效果图:

    默认只展示一行,设置元素固定高度为300px ,通过绑定时间js ,如果页面实际高度大于300px,修改元素高度为auto

     代码:

    html:

    <ul class="bus_list" style="height: 300px;">

      <li onclick="getBigimg(this)" data-url="https://test-resource-ng.ouyeel.com/statics/S3WL?path=public_oyzg/b872e16ad9253cb18d05ae420b0ea2e0.png&amp;fileName=b872e16ad9253cb18d05ae420b0ea2e0.png">

        <img src="https://test-resource-ng.ouyeel.com/statics/S3WL?path=public_oyzg/b872e16ad9253cb18d05ae420b0ea2e0.png&amp;fileName=b872e16ad9253cb18d05ae420b0ea2e0.png">

        <div class="bus_title">

          <p>测试</p>

        </div>

      </li>

      <li onclick="getBigimg(this)" data-url="http://10.60.148.67:7300/6/3590c4f8c1b0.jpg">

        <img src="http://10.60.148.67:7300/6/3590c4f8c1b0.jpg">

        <div class="bus_title">

          <p>1动车组提供二十八类客车转向架锻造零件</p>

        </div>

      </li>

      <li onclick="getBigimg(this)" data-url="http://10.60.148.67:7300/4/359164ddf39f.jpg">

        <img src="http://10.60.148.67:7300/4/359164ddf39f.jpg">

        <div class="bus_title">

          <p>动车组提供二十八类客车转向架锻造零件</p>

        </div>

      </li>

      <li onclick="getBigimg(this)" data-url="http://10.60.148.67:7301/1/3592b7b6f4e5.png">

        <img src="http://10.60.148.67:7301/1/3592b7b6f4e5.png">

        <div class="bus_title">

          <p>动车组提供二十八类客车转向架锻造零件</p>

        </div>

      </li>

      <li onclick="getBigimg(this)" data-url="http://10.60.148.67:7300/6/3590c4f8c1b0.jpg">

        <img src="http://10.60.148.67:7300/6/3590c4f8c1b0.jpg">

        <div class="bus_title">

          <p>1动车组提供二十八类客车转向架锻造零件</p>

        </div>

      </li>

      <li onclick="getBigimg(this)" data-url="http://10.60.148.67:7301/1/3592b7b6f4e5.png">

        <img src="http://10.60.148.67:7301/1/3592b7b6f4e5.png">

        <div class="bus_title">

          <p>动车组提供二十八类客车转向架锻造零件</p>

        </div>

      </li>

      <li onclick="getBigimg(this)" data-url="http://10.60.148.67:7300/6/3590c4f8c1b0.jpg">

        <img src="http://10.60.148.67:7300/6/3590c4f8c1b0.jpg">

        <div class="bus_title">

          <p>1动车组提供二十八类客车转向架锻造零件</p>

        </div>

      </li>

    </ul>

    <p class="bus_btn"><button onclick="btn(this)">更多 >></button></p>

    js:

    function btn(obj) {
    var h = $(obj).parent().parent().find("ul").height(); //获取元素高度
    if($(obj).text()=="更多 >>"){
    $(obj).parent().parent().find("ul").css("height","auto"); //修改高度为auto
    h = $(obj).parent().parent().find("ul").height(); //获取实际高度
    if(h>330){
    $(obj).text("收起 >>"); //按钮赋值
    }
    }else{
    $(obj).parent().parent().find("ul").css("height","300px");
    $(obj).text("更多 >>");
    }
    }
  • 相关阅读:
    搭建es7.5的配置文件
    kafka的暂停消费和重新开始消费问题
    hive sparksession查询只显示defalt库问题
    flink widow&window funcion&水印
    flink支持的数据类型讲解(可序列化) 和 内置累加器的运用
    mysql tar安装模式
    Permission denied: user=root, access=WRITE, inode="/":hdfs:supergroup:drwxr-xr-x
    错误Exception in thread "main" java.lang.NoClassDefFoundError: org/apache/hadoop/fs/FSDataInputStream排查思路
    SPSS非参数检验
    SPSS回归分析
  • 原文地址:https://www.cnblogs.com/chenwenjia/p/14717247.html
Copyright © 2011-2022 走看看