项目场景：

jq循环遍历元素的高度，用于判断超出显示更多按钮然后点击展示全部，再次点击控制显示一行

问题描述：

第一步：jq循环遍历元素的高度：

 var divlist=$(".c-classify div").find('ul')console.log(divlist);for(var i=0;i<divlist.length;i++){console.log(divlist[i].offsetHeight);}

第二步：jq根据动态下标改变样式显示更多按钮

var divlist=$(".c-classify div").find('ul')console.log(divlist);for(var i=0;i<divlist.length;i++){console.log(divlist[i].offsetHeight);if(divlist[i].offsetHeight>38){console.log($(".c-classify div").find('ul span').css("display"));$(".c-classify div").find('ul span').eq(i).css('display',"block")}}

第三步：控制点击按钮展开高度，不做高度限制同时切换按钮内容三角

$(".c-classify div").find('ul span').click(function(){//点击切换高度以及隐藏展开console.log($(this).parent().css("height")=="38px");if($(this).parent().css("height")=="38px"){$(this).parent().css({"height":"","overflow":"visible"})$(this).html("更多▲")}else{console.log(11);$(this).parent().css({"height":"38px","overflow":"hidden"})$(this).html("更多▼")}})

解决方案：

三者结合:

//根据动态下标改变样式

var divlist=$(".c-classify div").find('ul')
console.log(divlist);
for(var i=0;i<divlist.length;i++){console.log(divlist[i].offsetHeight);if(divlist[i].offsetHeight>38){//循环列表，超出隐藏显示更多按钮console.log($(".c-classify div").find('ul').eq(i).css("height"));$(".c-classify div").find('ul span').eq(i).css('display',"block")$(".c-classify div").find('ul').eq(i).css({"height":"38px","overflow":"hidden"})console.log($(".c-classify div").find('ul').eq(i).css("height"));}
}
$(".c-classify div").find('ul span').click(function(){//点击切换高度以及隐藏展开console.log($(this).parent().css("height")=="38px");if($(this).parent().css("height")=="38px"){$(this).parent().css({"height":"","overflow":"visible"})$(this).html("更多▲")}else{console.log(11);$(this).parent().css({"height":"38px","overflow":"hidden"})$(this).html("更多▼")}
})

jq循环遍历元素的高度，判断超出显示更多按钮相关推荐

js文本内容显示6行，超出6行出现显示更多按钮，css样式超出行数只能使用...去替代
js处理文本内容显示6行,超出6行出现显示更多按钮,对于网上说的css样式处理,基本上都是超出6行使用-去处理,不符合需求,先看结果,再看需求:如下先看实现结果,如下图所示: 需求:产品经理提出详情 ...
layui循环遍历数据_Layui之动态循环遍历出的富文本编辑器显示
这篇记得是工作中的例子描述: 平常的富文本显示都是根据静态的html获取id来显示,比如: 富文本内容 layui.use([ "form", "layer" ...
vue 超出多行，省略，展示显示更多按钮
前期准备:根据字体大小和行数确定这个块整体的高度 template <div class="desc" ref="desc">{{desc}}< ...
JSP中使用＜c:forEach＞标签循环遍历元素
1.forEach标签元素 <c:forEach items="接收集合对象" var="迭代参数名称" varStatus="迭代状态,可访问 ...
jq 循环遍历二维数组
//获取中奖名单 function getList(){$.ajax({type: "GET", //用GET方式传输dataType: "JSON", //数 ...
java循环遍历队列_java实现循环队列
java实现循环队列循环队列的优点普通队列出队操作开销大:在出队操作时,索引为0后面的所有元素,都需要往前移动一位,元素越多,消耗的时间也越多,时间复杂度为O(N). 循环队列的逻辑: 1.当元素 ...
js map满足条件跳出循环_js.es5 map循环一大坑：循环遍历竟然出现逗号！
一.map map大法好作为当今程序界最好用的循环方法之一map, 在我的项目里基本替代了for循环 map循环常用的一些方法 /********* ES6 **********/ //一行代码可以 ...
php循环volist,ThinkPHP中循环遍历的两种方法（volist和foreach标签）
在ThinkPHP中系统提供了两个标签来实现便利操作:volist标签和foreach标签. volist语法格式: 循环体注意:volist是双标签语句,需要闭合. foreach语法格式: 循环 ...
C#开发Unity游戏教程循环遍历做出判断及Unity游戏示例
C#开发Unity游戏教程循环遍历做出判断及Unity游戏示例 Unity中循环遍历每个数据,并做出判断很多时候,游戏在玩家做出判断以后,游戏程序会遍历玩家身上大量的所需数据,然后做出判断,即首先判 ...

jq循环遍历元素的高度，判断超出显示更多按钮

项目场景：

问题描述：

解决方案：

jq循环遍历元素的高度，判断超出显示更多按钮相关推荐

最新文章

热门文章