js 实现简单收起功能

2021-05-29 17:01

阅读:696

标签:obj   src   source   load   button   else   html   高度   resource   

效果图:

技术图片

 

 

 

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

技术图片

 

 

 代码:

html:

      

  •     

        

          

    测试

        

      

  •   

  •     

        

          

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

        

      

  •   

  •     

        

          

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

        

      

  •   

  •     

        

          

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

        

      

  •   

  •     

        

          

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

        

      

  •   

  •     

        

          

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

        

      

  •   

  •     

        

          

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

        

      

 

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 实现简单收起功能

标签:obj   src   source   load   button   else   html   高度   resource   

原文地址:https://www.cnblogs.com/chenwenjia/p/14717247.html


评论


亲,登录后才可以留言!