那片笑声让我想起我的那些花儿
在我生命每个角落静静为我开着
我曾以为我会永远守在他身旁
今天我们已经离去在人海茫茫
-
2021-06-08 18:55:15
感兴趣javascript实现文字隐藏、展开收起的简单示例的小伙伴，下面一起跟随编程之家 jb51.cc的小编来看看吧。
function init(){
var len = 14; //默认显示字数
var ctn = document.getElementById("content"); //获取div对象
var content = ctn.innerHTML; //获取div里的内容
//alert(content);
var span = document.createElement("span"); //创建元素
var a = document.createElement("a"); //创建元素
span.innerHTML = content.substring(0,len); //span里的内容为content的前len个字符
a.innerHTML = content.length>len?"展开":""; //设置a的显示
a.href = "javascript:void(0)";
a.onclick = function(){
if(a.innerHTML.indexOf("展开")>0){ //如果a中含有"展开"则显示"收起"
a.innerHTML = "收起";
span.innerHTML = content;
}else{
a.innerHTML = "展开";
span.innerHTML = content.substring(0,len);
}
}
// 设置div内容为空，span元素 a元素加入到div中
ctn.innerHTML = "";
ctn.appendChild(span);
ctn.appendChild(a);
}
更多相关内容 -
js实现点击展开隐藏效果（实例代码）
2020-10-17 22:50:19本篇文章小编给大家带来一篇关于JS实现点击展开点击隐藏的效果代码内容，有兴趣的朋友参考下。 -
JS实现鼠标点击展开或隐藏表格行的方法
2020-10-24 15:29:07主要介绍了JS实现鼠标点击展开或隐藏表格行的方法,实例分析了javascript操作table表格与css样式的技巧,需要的朋友可以参考下 -
jQuery实现的点击显示隐藏下拉菜单功能完整示例
2020-11-27 06:55:44本文实例讲述了jQuery实现的点击显示隐藏下拉菜单功能。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>toggle</... -
实现文本太长隐藏，点击“点击展开”查看全部
2022-01-19 16:06:34这个代码如下实现 $(function(){ $(".hook-more").each(function(){ var maxwidth=15;//设置最多显示的字数 var text=$(this).text(); if($(this).text().length>maxwidth){ $(this).text($(this)....展开全文
这个代码如下实现
$(function(){ $(".hook-more").each(function(){ var maxwidth=15;//设置最多显示的字数 var text=$(this).text(); if($(this).text().length>maxwidth){ $(this).text($(this).text().substring(0,maxwidth)); $(this).html($(this).html()+"..."+"<a href='###'> 点击展开</a>"); }; $(this).find("a").click(function(){ $(this).parent().text(text); }) }) })
-
JS实现可点击展开与关闭的左侧广告代码
2020-11-22 10:58:25这里介绍的是JS实现网页上可点击展开、关闭的左侧广告代码，表现形式类似对联广告，不过操作方式不一样，点击时候会隐藏在屏幕在左侧，但是不是完全隐藏，仍显示一个图片竖条的广告，而且点击“显示”的时候，它会... -
基于JavaScript实现评论框展开和隐藏功能
2021-06-09 02:33:471.效果图如下所示，点击评论会在对应的评论区域展开评论输入框，点击取消会取消对应的评论输入框2.html代码：需要引入jQuery.jsclass="nr-comment">class="nr-comment-con">class="nr-comment-nav">class=...展开全文1.效果图如下所示，
点击评论会在对应的评论区域展开评论输入框，点击取消会取消对应的评论输入框
2.html代码：需要引入jQuery.js
class="nr-comment">
class="nr-comment-con">
class="nr-comment-nav">
class="comment-number">
493
条评论
class="comment-sort">
切换为时间排序
class="comment-content">
class="com-users">
class="comment-user">
知乎用户
class="comment-user-content">
这个爬虫真的好强大！
class="comment-time">
2017.10.01 21:32:30class="btn btn-primary btn-sm btn-reply">回复
class="user-reply">
class="reply-in">
type="text"
value=""
name=""
placeholder="请输入评论内容" />
class="reply-buttons">
type="button"
class="btn btn-primary btn-comment btn-sm">评论
type="button"
class="btn btn-default btn-cancel btn-sm">取消
class="comment-content">
class="com-users">
class="comment-user">
知乎用户
class="comment-user-content">
这个爬虫真的好强大！
class="comment-time">
2017.10.01 21:32:30class="btn btn-primary btn-sm btn-reply">回复
class="user-reply">
class="reply-in">
type="text"
value=""
name=""
placeholder="请输入评论内容" />
class="reply-buttons">
type="button"
class="btn btn-primary btn-comment btn-sm">评论
type="button"
class="btn btn-default btn-cancel btn-sm">取消
class="comment-content">
class="com-users">
class="comment-user">
知乎用户
class="comment-user-content">
这个爬虫真的好强大！
class="comment-time">
2017.10.01 21:32:30class="btn btn-primary btn-sm btn-reply">回复
class="user-reply">
class="reply-in">
type="text"
value=""
name=""
placeholder="请输入评论内容" />
class="reply-buttons">
type="button"
class="btn btn-primary btn-comment btn-sm">评论
type="button"
class="btn btn-default btn-cancel btn-sm">取消
class="comment-content">
class="com-users">
class="comment-user">
知乎用户
class="comment-user-content">
这个爬虫真的好强大！
class="comment-time">
2017.10.01 21:32:30class="btn btn-primary btn-sm btn-reply">回复
class="user-reply">
class="reply-in">
type="text"
value=""
name=""
placeholder="请输入评论内容" />
class="reply-buttons">
type="button"
class="btn btn-primary btn-sm btn-comment">评论
type="button"
class="btn btn-default btn-sm btn-cancel">取消
class="comment-ipt">
type="text"
placeholder="输入你的评论">
type="submit"
class="btn btn-sm btn-primary">评论
3.css样式代码，样式无所谓，自己写就可以。
.nr-comment {
width:
100%;
border-right:
1px
solid #A9A9A9;
border-left:
1px
solid #A9A9A9;
}
.nr-comment .nr-comment-con {
width:
100%;
}
.nr-comment .nr-comment-con .nr-comment-nav {
width:
100%;
height:
40px;
border-bottom:
1px
solid #F5F5F6;
border-right:
1px
solid #A9A9A9;
border-left:
1px
solid #A9A9A9;
background-color:
#1E8CE0;
}
.nr-comment .nr-comment-con .nr-comment-nav .comment-number {
float:
left;
width:
85px;
height:
30px;
text-align:
center;
margin-top:
5px;
color:
white;
line-height:
2.3em;
}
.nr-comment .nr-comment-con .nr-comment-nav .comment-sort {
float:
right;
width:
110px;
height:
30px;
margin-top:
5px;
margin-right:
10px;
line-height:
2em;
color:
white;
}
.nr-comment .nr-comment-con .comment-content {
width:
100%;
margin-top:
10px;
border-bottom:
1px
solid #a9a9a9;
}
.nr-comment .nr-comment-con .comment-content .com-users {
width:
100%;
min-height:
60px;
}
.nr-comment .nr-comment-con .comment-content .com-users .comment-user {
float:
left;
width:
500px;
height:
60px;
}
.nr-comment .nr-comment-con .comment-content .com-users .comment-user span {
color:
black;
margin-left:
10px;
}
.nr-comment .nr-comment-con .comment-content .com-users .comment-user .comment-user-content {
width:
90%;
height:
60px;
margin-left:
10px;
}
.nr-comment .nr-comment-con .comment-content .com-users .comment-time {
float:
right;
width:
190px;
height:
60px;
text-align:
center;
color:
#9CADC6;
font-size:
0.9em;
text-align:
right;
}
.nr-comment .nr-comment-con .comment-content .com-users .comment-time div {
margin-right:
15px;
}
.nr-comment .nr-comment-con .comment-content .com-users .comment-time .btn-reply {
margin-top:
5px;
border-radius:
4px;
border:
none;
background-color:
#1BB394;
color:
white;
margin-right:
15px;
}
.nr-comment .nr-comment-con .comment-content .user-reply {
display:
none;
width:
100%;
height:
50px;
}
.nr-comment .nr-comment-con .comment-content .user-reply .reply-in {
float:
left;
width:
85%;
height:
50px;
}
.nr-comment .nr-comment-con .comment-content .user-reply .reply-in input {
width:
100%;
height:
30px;
margin-top:
10px;
margin-left:
10px;
}
.nr-comment .nr-comment-con .comment-content .user-reply .reply-buttons {
float:
right;
margin-top:
10px;
}
.nr-comment .nr-comment-con .comment-content .user-reply .reply-buttons .btn-comment {
float:
right;
margin-right:
14px;
background-color:
#1BB394;
border:
none;
color:
white;
}
.nr-comment .nr-comment-con .comment-content .user-reply .reply-buttons .btn-cancel {
float:
right;
margin-right:
10px;
}
.nr-comment .nr-comment-con .comment-ipt {
width:
100%;
height:
40px;
border-bottom:
1px
solid #A9A9A9;
margin-top:
10px;
}
.nr-comment .nr-comment-con .comment-ipt input {
display:
block;
width:
92%;
height:
30px;
float:
left;
font-size:
14px;
margin-left:
10px;
}
.nr-comment .nr-comment-con .comment-ipt button {
display:
block;
float:
right;
background-color:
#1BB394;
color:
white;
margin-right:
13px;
border:
none;
}
4.js控制对应评论按钮事件。
$(document).ready(function()
{
$('.btn-reply').click(function()
{
// console.log($(this).index());
// 获取回复按钮集合,getElementByClassName;
var m
= document.getElementsByClassName("btn-reply");
var n
= document.getElementsByClassName("user-reply");
console.log('回复按钮集合'
+ m);
// 获取回复按钮的索引
var index
= $(".btn-reply").index($(this));
console.log(index);
$(".user-reply").eq(index).css("display",
"block");
});
$('.btn-cancel').click(function()
{
var m
= document.getElementsByClassName("btn-reply");
var n
= document.getElementsByClassName("user-reply");
var index
= $(".btn-cancel").index($(this));
console.log(index);
$(".user-reply").eq(index).css("display",
"none");
});
});
总结
以上所述是小编给大家介绍的基于JavaScript实现评论框展开和隐藏功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
-
简单实现js点击展开二级菜单功能
2021-06-08 16:53:37我最近就遇到做个点击展开二级菜单的要求，当然只能用原生的JS去写来实现，我借鉴了网上的一个案例，补充一下，分享一下：如果，默认打开页面进来时二级菜单是隐藏的，需要点击才能展现二级菜单，再点击就是隐藏二级...展开全文虽然，jQuery已经非常好用了，但是实际的开发项目中，还是有很多限制，比如项目组奇葩的要求，不能使用任何插件，当然，也是考虑插件占用资源，毕竟100+KB对与小型项目来说还是非常大的。我最近就遇到做个点击展开二级菜单的要求，当然只能用原生的JS去写来实现，我借鉴了网上的一个案例，补充一下，分享一下：
如果，默认打开页面进来时二级菜单是隐藏的，需要点击才能展现二级菜单，再点击就是隐藏二级菜单。这里有两个点，实现展现和隐藏用display="block"和display="none",另外就是要做一个判断，if else的判断当前是block还是none。
Document#sub_menu_1,#sub_menu_2{
display: none;
}
ul li:hover{
cursor: pointer;
}
- 一级菜单1
- 一级菜单2
- 一级餐单3
function f(str){
var sub_menu = document.getElementById(str);
var dis_v = sub_menu.style.display;
if(dis_v == "block")
sub_menu.style.display = "none";
else
sub_menu.style.display = "block";
}
有个注意事项就是一级菜单的li不能添加a标签，不然会不起作用。
如果，你的页面默认进来二级菜单是展现的，点击时才关闭。直接把style标签的样式display="none"去掉就可以。同时需要修改一下js。
function f(str){
var sub_menu = document.getElementById(str);
var dis_v = sub_menu.style.display;
if(dis_v == "none")
sub_menu.style.display = "block";
else
sub_menu.style.display = "none";
}
仔细看，不然你就会发现你需要点击两次才会出现想要的效果。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
-
jQuery 鼠标点击展开/显示和收缩/隐藏导航菜单（子菜单）
2021-06-08 18:31:15今天一个zblog模板用户提出再模板中需要加入一个菜单展开/显示、收缩/隐藏功能，点击可展开，再次点击就可以关闭的导航菜单，如下图所示：这样的特效必须使用到JS才行，使用jQuery最佳！所以上方这段特效所需要的... -
Vue在页面右上角实现可悬浮/隐藏的系统菜单
2021-01-21 13:36:01这是个大多数网站很常见的功能，点击页面右上角头像显示一个悬浮菜单，点击页面其他位置或再次点击头像则菜单隐藏。 作为一个jQuery前端攻城狮实现这个功能可以说是很easy了，但是对只刚粗看了一遍vue文档的菜鸟来... -
前端网页内容实现展开/收起全文的操作（js+css控制高度实现）
2021-06-08 17:18:47在展示大量文本的时候,很多网站会在页面上出现一个展开全文的... 它旁边的点击展开全文默认隐藏 , 超过高度展示 .展开全文点击后更换文字内容为收起全文下面直接展示代码：1、html的div文本内容比如是这样内容......... -
小程序实现展开/收起的效果示例
2021-06-10 10:33:06前言：本章说下文字内容的展开与收起的实现，要实现这么一个效果：当收起的时候隐藏并显示省略号，当展开的时候显示全部文字。先看下效果图：小程序 — 展开/收起1、结构样式(1)首先我们定义一下html结构：标题标题... -
js-实现jQuery网页在线QQ客服.zip
2019-07-11 13:48:40漂亮实用的jQuery网页在线QQ客服代码，默认不展开（点击能展开），可以放3个客服QQ、当页面宽度小于1024像素时候自动隐藏，样式很漂亮，js代码推荐下载！ -
纯css实现网页内容的隐藏和点击后下拉查看
2019-11-20 22:14:41纯css实现网页内容的隐藏和点击后下拉查看 在我们进行网页开发的时候经常会有这样的需求，我们一段文本内容可能会比较冗长，为了提升用户体验，我们必须考虑到并非所有用户都喜欢，都需要去查看所有文本内内容，但... -
jQuery点击页面其他部分隐藏下拉菜单功能
2020-12-29 13:27:53web页面中，我们一般不用select、option来实现下拉菜单效果，因为下拉框的样式丑且难以美化，所以我们选择控制ul显示隐藏来实现同样且高大上的效果，但是不能像下拉框那样点击页面其他部分，下拉菜单收起或隐藏，... -
使用JavaScript鼠标点击来实现“展开与收起”效果
2019-01-18 15:56:01开发工具与关键技术：DW JavaScript鼠标点击来实现“展开与收起”效果 作者：赖文扬 撰写时间：2019年1月17日 用 JavaScript 代码来实现一下鼠标点击“展开与收起”的效果，首先要 创建html文件，然后再一个... -
HTML5--》点击显示隐藏内容
2021-06-11 04:19:30js点击显示隐藏内容body{font-size:12px;}span{font-weight:bold;}details{overflow:hidden;height:0;padding-left:200px;position:relative;display:block;}details[open]{height:auto;}点击显示内... -
js实现多个列表展开收缩类似手风琴效果
2021-10-12 15:26:10实现效果大概是多个卡片默认均隐藏详情部分，点击展开可查看该卡片详情，点击收起详情隐藏；同时只展开一个，即某个展开时其他的均收缩状态。 设计思路： 详情模块与展开按钮各设置两个样式类，即默认样式类与展开... -
使用脚本控制网页Table的显示隐藏(全代码)_AX
2020-12-01 09:07:58【需求】 如果大家登录过 我傲:http://www.woall.com 新浪博客等 就会发现可以点击栏目标题,就会发现栏目可以展开和收起,非常好用!其实这个功能实现起来很简单.重点就是要找到要隐藏的Table行,对它的display属性进行... -
案例：jQuery文本段落展开和折叠效果/点击查看更多、点击隐藏
2021-06-09 01:00:48今天分享个更好用的，需要jquery支持：重点：文字...jQuery文本段落展开和折叠效果#wrapm{overflow:hidden;}#read-more{text-align:center;}$(function(){varslideHeight=78;//pxvardefHeight=$('#wrapm').height(... -
网页点击弹出、展开层效果集合
2010-11-23 20:51:11163网盘折叠菜单*******div显示隐藏效果*********层展开关闭-运动缓冲效果**********动画效果打开层 关闭层************腾讯页内弹出窗口效果....... 开源程序 简约而不简单！对于学习html，提高兴趣非常有好处！...... -
HTML实现点击展开和收起
2014-07-04 16:00:42#box,#box2,#box3,#box4{padding:10px;...//===========================点击展开关闭效果==================================== function openShutManager(oSourceObj,oTargetObj,shutAble,oOpenT -
jQuery实现表格展开与折叠的方法
2021-06-08 16:37:23具体分析如下：这是很人性化的一款特效代码，实现点击其中一个父级，另一个之前打开的父级会自动关闭jQuery表格展开折叠，默认折叠table{ border:0;border-collapse:collapse;}td{ font:normal 12px/17px Arial;... -
用JS+CSS写左侧可隐藏的展开、折叠菜单代码
2021-06-11 09:51:00用JS+CSS写左侧可隐藏的展开、折叠菜单代码 - www.webdm.cnvar maxmnus = 5function opTab(){var mnu = document.getElementById("menubar")var arrdiv = document.getElementById("arrow")var arrtxt = document.... -
小巧实用的点击折叠展开内容jQuery特效
2021-06-10 13:18:57最近在学习js的过程中越来越感受到jQuery的魅力，这个著名的js框架极大的简化了JavaScript编程，本来需要用复杂原生js代码实现的效果可以用jQuery轻松实现，今天分享一小段经典的点击折叠展开内容特效。看这个例子：... -
jQuery实现内容或文章标题隐藏 显示特效.rar
2019-07-10 18:46:35jQuery实现的一款网页物资，网页内容或文章标题隐藏、显示的jquery特效，或者叫做目录显示隐藏效果，可隐藏或下拉延展菜单。当鼠标悬停于条目中的任意内容项时，自动展开该项目中的内容。来自百度百科，不过百度好些... -
js实现评论框展开和隐藏
2017-08-25 09:06:35点击评论会在对应的评论区域展开评论输入框，点击取消会取消对应的评论输入框 2.html代码：需要引入jquery.js div class="nr-comment"> div class="nr-comment-con"> div class="nr-comment-nav"> div... -
[javascript] 实现展开全文和收起全文效果
2020-05-29 14:27:00在展示大量文本的时候,很多网站会在页面上出现一个展开全文的文字按钮 , 点击这个按钮才会展开全部内容 . ... 它旁边的点击展开全文默认隐藏 , 超过高度展示 . 展开全文点击后更换文字内容为收起全...
收藏数
8,543
精华内容
3,417