JavaScript文本收缩展开 showdetail

最新推荐文章于 2022-02-11 21:13:17 发布
最新推荐文章于 2022-02-11 21:13:17 发布
阅读量914 收藏
点赞数
文章标签： javascript xhtml ViewUI
原文链接：http://www.cnblogs.com/handboy/p/7158381.html
版权

原文发布时间为：2009-11-15 —— 来源于本人的百度文章 [由搬家工具导入]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>

<body>
<div id="divS" style="border:1px solid #f0f0f0;background-color:#ccc;padding:4px;margin:10px">
<p>测试文本</p>
<p>测试了</p>
<p>测试侧试试了</p>
<p>测试文本</p>
<p>测试了</p>
<p>测试侧试试了</p>
<p>测试</p>
<p>测试文本</p>
<p>测试了</p>
<p>测试侧试试了</p>
<p>测试文本</p>
<p>测试了</p>
<p>测试侧试试了</p>
</div>
<p>
<script type="text/javascript"><!--
doShrink(document.getElementById('divS'),60);
function doShrink(oshrink,maxHeight){  
    if(oshrink){  
        var oH = (oshrink.clientHeight||oshrink.offsetHeight);  
        if(oH>maxHeight){  
            var linka = document.createElement("a");  
            var div = document.createElement("div");     
            div.innerHTML = "……<br />"
            text = document.createTextNode("[点击查看更多内容]");
            linka.href = "javascript:void(0)";  
            linka.onclick = function(e) { shrinkShow(this); }  
            linka.appendChild(text);  
            div.appendChild(linka);
            var onext = oshrink.nextSibling;  
            if(onext)  
                oshrink.parentNode.insertBefore(div,onext);  
            else
                oshrink.parentNode.appendChild(div);  
            //过滤较长的内容  
            oshrink.srcHeight = oH;  
            oshrink.style.cssText ="overflow-y: hidden; max-height: "+maxHeight+"px; *_height: "+maxHeight+"px; ";  
        }  
    }  
}

function remove(o){
if(o && o.parentNode)o.parentNode.removeChild(o);
}

/* 第一种，具有展开效果 */
var shrinkInterval = false;  
function shrinkShow(obj) {  
    var omore = obj.parentNode;  
    var ohide = omore.previousSibling;  
    shrinkInterval = window.setInterval(function(){shrinkStep(ohide);},20);
remove(omore); //去除更多链接
}  

function shrinkStep(ohide){  
    var targetHeight = ohide.srcHeight;  
    var nowHeight = (ohide.clientHeight||ohide.offsetHeight);;  
    if(nowHeight < targetHeight){  
        ohide.style.height = nowHeight+20 + 'px';  
        ohide.style.maxHeight = nowHeight+20 + 'px';  
    }else{  
        if(shrinkInterval){  
            window.clearInterval(shrinkInterval);  
            shrinkInterval = false;  
        }  
    }  
}

/* 第二种，没有展开效果 */

/*
function shrinkShow(obj) {  
    var omore = obj.parentNode;  
    var ohide = omore.previousSibling;  
    ohide.style.height = ohide.srcHeight + 'px';  
    ohide.style.maxHeight = ohide.srcHeight + 'px';
remove(omore); //去除更多链接
}
*/

// --></script>
</p>
</body>
</html>

转载于:https://www.cnblogs.com/handboy/p/7158381.html

weixin_30706691
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-列表下详情的展开与折叠案例
10-15
当`showDetail`等于当前项的`index`时，添加`open`类，使箭头旋转180度，表示展开状态。 ```css .arrow { position: absolute; width: 0.6rem; height: 0.3rem; top: 2.0rem; right: 0.8rem; background: url...
javascript页面详细信息的显示和隐藏
weixin_34013044的博客
09-22 296
2019独角兽企业重金招聘Python工程师标准>>> ...
javascript对象详解（JavaScript Objects in Detail）
mm9mm8的专栏
11-28 1681
javascript的核心—最经常用到也是最基础的—数据类型就是对象。javascript有一种复杂的数据类型，即对象类型，和五种简单的数据类型：数字，字符串，布尔，undefined（未定义），和null（空）。记住这些简单（基本）数据类型是不可变的，它们不能被改变，然后对象是可变的。 什么是对象 一个对象是一组没有顺序的存储为名值对形式的基本数据类型（有时也可以是引用数据类型）。在这组数据
JavaScript Objects in Detail
changer328的专栏
02-19 996
原文  http://javascriptissexy.com/javascript-objects-in-detail/ JavaScript核心最常用和最基础的数据类型是Object数据类型。JavaScript拥有一个复杂数据类型Object数据类型和五种简单数据类型Number,Boolean,Undefined,Null。这些简单数据类型是不可变的，但对象是可变的。 对象的概念
JS 之 Event 对象
Happy Simon
01-12 2277
今天跟大家分享下JS 之 Event 对象的知识。 1 概述 事件发生以后，会产生一个事件对象，作为参数传给监听函数。浏览器原生提供一个Event对象，所有的事件都是这个对象的实例，或者说继承了Event.prototype对象。 Event对象本身就是一个构造函数，可以用来生成新的实例。 event = new Event(type, options); Event构造函数接受两个参数。第一个...
Python3 - 补充知识点之HTML 、JavaScript、CSS (第五天)
韩俊强的博客
02-11 954
在学习Python时需要具备HTML, CSS, JavaScrip等基础知识, 本篇文章是学习Python语言的补充知识点, 帮助学习Python时能更快的上手, 同时对学习抓包有很大的辅助作用。
400多个css+javascript网页特效
05-12
7. **高亮显示**：JavaScript 可以用来高亮文本输入框，突出显示用户的当前操作，增强交互反馈。 8. **表单组件**：例如可编辑的下拉列表和带有滑动条的表单，JavaScript 可以增强这些标准表单元素的功能，使用户...
echarts自定义分组，x轴分级，支持多级，支持dataZoom
03-31
rotate: 45 // 旋转标签文本，避免重叠 } } ``` 在支持多级的情况下，你可能需要使用`echarts.util.each`遍历数据，动态构建X轴的多级数据。同时，可以使用`axisTick`配置来控制每一级的显示方式。 至于dataZoom...
ASP.NET中使用IFRAME建立类Modal窗口
01-02
我们经常要在程序的人机交互中用到模态窗口，但在B/S开发中，这一切变得不容易了，虽然也可以用window.showModalDialog函数实现（见http://dotnet.aspx.cc/ShowDetail.aspx?id=49ML4AO8-5PB3-4KNY-NJZD-LJOIOXV4M1X4...
进程创建模拟实验
09-16
输入实验提供的代码后，可以输入createpc命令创建进程，输入showdetail显示每个进程及其子进程的信息，测试命令解释如下： createpc 创建进程命令。 参数： 1 pid（进程id）、 2 ppid（父进程id）、3 prio（优先级）...
ligerUI集合
05-26
ligerUI前台控件集合，包含有grid,text,checkbox等控件。
this方法获取a标签ID值及内容；idx传参
had_meno的博客
02-05 2517
JS运用this方法获取a标签中的ID值： XX function showDetail(th) { var id = th.id; //将获取的id值赋给新变量 var aContent = document.getElementById(id).innerHTML; //通过获取
JS报错：Uncaught ReferenceError: ShowDetail is not defined at HTMLAnchorElement.onclick
热门推荐
An Insecure Programming
10-30 1万+
在datagrid列里添加一个列按钮，加上单击事件。事件无用，控制台报JS错如下： JS代码如下： function ShowDetail(Id) { alert(Id); } 添加单击事件代码如下： { field: 'opt', title: '操作', width: 200, align: 'center', form...
父类Vehicles 属性：名称，颜色，座位；方法：showDetail( )显示名称，颜色，座位.子类Car 调用Vehicles类（父类）方法showDetail( )显示名
heheda_123的博客
06-07 1125
class Vehicles{ String name; String color; String seat; public void showDetail(){   System.out.println("名称:"+name+" 颜色:"+color+" 座位:"+seat); }}class Car extends Vehicles{ String unique; public Car(St...
EXTjs的案例（二）
UUID
04-02 1790
这个例子比较经典，常用的一些操作基本都包括在内了。 var win=null; function showPanel(){ win.show(); }; (function(){ Ext.onReady(function(){ Ext.Ajax.timeout = 900000; var devRecord = Ext.data.Re
html 进入页面 调用js方法,html5 父页面调用子页面js方法
weixin_36204727的博客
06-03 485
父页面代码：var randid=result.rows.item(0)['id'];plus.webview.close("test_order_detail");//创建之前要关闭一次，因为这个方法是重复使用的，不会报错的sub = plus.webview.create("test_order_detail.html","test_order_detail",subpage_style,{q...
ES6 使用笔记
Wu_shuxuan的博客
06-30 1133
ES6 是一种客户端脚本语言规范；（ES2015,ES2016,ES2017等，ES2015 则是正式名称，特指该年发布的正式版本的语言标准） let 和 const 命令 （只在声明所在的块级作用域内有效） let 块级定义变量，只在let命令所在的代码块内有效。 const 声明一个只读的常量。一旦声明，常量的值就不能改变。const一旦声明变量，就必须立即初始化 ES6 引入了块级作用域，明确允许在块级作用域之中声明函数。ES6 规定，块级作用域之中，函数声明语句的行为类似于let，在块级作用域之
用javascript写一个商品动态网站
最新发布
06-13
好的，下面是一个简单的商品动态网站的JavaScript代码实现，包含商品列表展示、商品搜索、商品详情展示等功能： ```html <!DOCTYPE html> <html> <head> <title>商品动态网站</title> <meta charset="utf-8"> </head> <body> <h1>商品列表</h1> <input type="text" id="searchInput" placeholder="输入商品名称进行搜索"> <button onclick="search()">搜索</button> <ul id="goodsList"></ul> <div id="detail" style="display:none;"> <h2 id="name"></h2> <p id="description"></p> <p id="price"></p> </div> <script> // 商品列表数据，实际应该从服务器获取 var goodsData = [ { name: "商品1", description: "这是商品1的描述", price: 100 }, { name: "商品2", description: "这是商品2的描述", price: 200 }, { name: "商品3", description: "这是商品3的描述", price: 300 } ]; // 初始化商品列表 var goodsList = document.getElementById("goodsList"); for (var i = 0; i < goodsData.length; i++) { var li = document.createElement("li"); li.innerHTML = "<a href='javascript:showDetail(" + i + ")'>" + goodsData[i].name + "</a>"; goodsList.appendChild(li); } // 搜索商品 function search() { var keyword = document.getElementById("searchInput").value; var result = []; for (var i = 0; i < goodsData.length; i++) { if (goodsData[i].name.indexOf(keyword) != -1) { result.push(goodsData[i]); } } showGoodsList(result); } // 展示商品列表 function showGoodsList(data) { goodsList.innerHTML = ""; for (var i = 0; i < data.length; i++) { var li = document.createElement("li"); li.innerHTML = "<a href='javascript:showDetail(" + i + ")'>" + data[i].name + "</a>"; goodsList.appendChild(li); } } // 展示商品详情 function showDetail(index) { var detail = document.getElementById("detail"); detail.style.display = "block"; document.getElementById("name").innerHTML = goodsData[index].name; document.getElementById("description").innerHTML = goodsData[index].description; document.getElementById("price").innerHTML = "价格：" + goodsData[index].price + "元"; } </script> </body> </html> ``` 在这个代码中，我们首先定义了一个商品列表的数据`goodsData`，其中包含了三个商品的名称、描述和价格。然后，我们使用JavaScript动态生成了一个商品列表展示的`<ul>`元素，并将商品数据填充到列表中。同时，我们还添加了一个输入框和一个搜索按钮，用于搜索商品，当用户输入关键字并点击搜索按钮时，我们会根据关键字过滤出符合条件的商品，并重新渲染商品列表。 另外，我们还定义了一个`showDetail`函数，用于展示商品详情。当用户点击商品列表中的某一项时，我们会调用该函数，将商品详情展示在页面上。 当然，这只是一个简单的示例，实际的商品动态网站需要更加完善的功能和更复杂的交互逻辑。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值