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("更多 >>");
    }
    }
  • 相关阅读:
    flash 语法 入门
    flash 代码 雪花飘落
    test windows live writer
    网站索引
    [转]jquery入门简介
    forcast iframe 及 四款播放器
    flash
    flash 备忘
    浏览器默认HTML的CSS样式属性
    简单多线程拷贝单文件示例
  • 原文地址:https://www.cnblogs.com/chenwenjia/p/14717247.html
Copyright © 2011-2022 走看看