jq实现展开全部内容,收起全部内容

1.内容超出就隐藏一部分。

效果

2.实现代码:

js部分涉及到多个

var contents=[];var maxheight=150;for (var i=0;i< Allbox.find(‘.neirong_nr‘).length;i++){    contents.push(Allbox.find(‘.neirong_nr‘).eq(i).html())};console.log(contents)var hide = function (){    Allbox.find(‘.neirong_nr‘).each(function(){        if($(this).text().length>maxheight){            $(this).text($(this).text().substring(0,maxheight));            $(this).html($(this).html()+‘...‘);            $(this).parent().find(‘.zk_kuanwen‘).html("查看更多");        } else {            $(this).parent().find(‘.zk_kuanwen‘).hide();        }    });};hide();Allbox.on(‘click‘, ‘.zk_kuanwen‘, function () {   var index=$(this).parent().parent().index();   // console.log()        if($(this).parent().find(‘.neirong_nr‘).html().length<contents[index].length){            console.log( contents[index])            $(this).parent().find(‘.neirong_nr‘).html(contents[index]);            $(this).html("收起文章");            more = false;        }else{            hide();        }

});
时间: 2024-10-29 01:45:20

jq实现展开全部内容,收起全部内容的相关文章

hexo的front-matter和收起文章内容

Hexo的Front-matter的格式和收起文章内容.让文章显示前一段文字,点击查看更多看详情. 示例 这是一个简单的样例. --- title: hexo的front-matter和收起文章内容 date: 2019/12/08 13:56:08 categories: #分类 - study tags: # 标签 - 前端 - Hexo --- 多个分类的写法 title: hexo的front-matter和收起文章内容 date: 2019/12/08 13:56:08 categor

javascript特效——展开选项和收起效果

1.简单的展开和收起效果: 1.1 静态结构HTML代码分析 body包含最外层的div id="pn"和按钮 a id="btn" ,而包含div id="pn"包含一个p标签和div id="hpn"(展开和收起部分) <body> <div id="pn" class="pn"> <p>分类:全部 电影 电视剧 综艺</p> <

ExpandableListView实现展开更多和收起更多

[需求]: 如上面图示 当点开某个一级菜单的时候,其他菜单收起: 子级菜单默认最多5个: 多于5个的显示"展开更多" 点击"展开更多",展开该级所有子级菜单,同时显示"收起更多" [代码]: @Bind(R.id.exp_listview)ExpandableListView expListview; adapter = new MyAdapter1(dataBeans);expListview.setDividerHeight(0);expLi

用ArrayAdapter来创建Spinner(自定义布局、默认布局、动态内容、静态内容)

         android:dropDownWidth 下拉列表宽度 android:dropDownHorizontalOffset 下拉列表距离左边的距离 android:dropDownVerticalOffset     下拉菜单和文本之间的垂直偏移量 android:popupBackground   下拉列表中的背景色 android:prompt 下拉列表中的提示信息(基本没用了) MainActivity.java package com.kale.spinner; imp

Css3之高级-2 Css内容生成(内容生成、计数器)

一.内容生成 内容生成示例 伪元素 :before 和 :after - 使用伪元素 :before 和 :after可以将内容添加到某个选择器定义的单个或者多个元素的每一个实例之前或者之后 - 实现为文档添加内容的效果 内容content - content 属性与:before及:after 伪元素配合使用,来插入生成内容 - 常用的取值 - url : 图像 - 字符串 : 纯文本 - 计数器 二.计数器 计数器示例 content-reset 属性 - counter-reset 属性用

内容提供者和内容观察者

1.创建一个内容提供者,继承contentProvider,作为四大组件之一,contentProvider需要在配置文件中进行配置 <provider android:name="cn.itcast.mobilesafe.provider.AppLockedProvider" android:authorities="cn.itcast.applockprovider"> </provider> 2. package cn.itcast.m

C#程序中:如何向记事本中写入内容和导出内容

在C#程序中在程序外部存储一些配置信心标记,如果用数据库就有些大材小用了,因此用*.txt.*.dat等存储,即方便又快捷,还可以减轻程序负担 下面研究一下 C#程序中:如何向记事本中写入内容和导出内容. 下面的代码示例演示如何使用 WriteAllText 方法在文件中写入内容.在此示例中,如果文件尚不存在,则创建一个文件,并向其中添加内容. using System; using System.IO; using System.Text; class Test {     public st

C# Html格式内容转Csv内容包括table(重点在rowspan和colspan合并),p,div元素

Html格式内容转Csv内容,包括table(重点在rowspan和colspan合并),p,div元素,table不能包含嵌套功能. 1 /// <summary> 2 /// Html格式内容转Csv内容包括table(重点在rowspan和colspan合并),p,div元素 3 /// </summary> 4 /// <param name="hrml"></param> 5 /// <returns></re

李开复谈内容创业[精彩内容精选]

问:怎么看待内容创业?对创造业者有哪些建议? 李开复:内容创业者在初期应该寻找各个不同的平台,看看在这个平台上你能提供的价值和得到的成长.收入.随着经验的累积,再去找一些机会.建议不要太快就被一个模式锁定,试试不同的模式.比如说知乎Live也是一个内容的模式,我通过语音就在创造一个内容,但是这个模式是新的.还要多看看不同的新模式,有没有适合你的.比如逻辑思维,最早用微信作平台,创造了好的内容,做了各种模式的引申.我认为逻辑思维比较好的两点在于好的内容和对的平台.用这个案例启发,不要过早去想商业模

织梦文章内容页独立内容页模板

织梦内容页独立内容模板,可以让文章不同样式展示 1.后台-系统-SQL命令行工具-执行 ALTER TABLE `#@_archives` ADD `tempname` VARCHAR( 40 ) NOT NULL DEFAULT ''; 2.后台文档发布模板里添加表单 文章模型的是 dede/templets/article_add.htm dede/templets/article_edit.htm 图集模型的是 dede/templets/album_add.htm dede/temple