js 实现简单收起功能

效果图:

js 实现简单收起功能

 

 

 

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

js 实现简单收起功能

 

 

 代码:

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("更多 >>");
}
}

 

js 实现简单收起功能

上一篇:给网站添加图片


下一篇:三合一,fanuc 三菱 兄弟 dnc 上传,下发,删除 NC程序