那片笑声让我想起我的那些花儿
在我生命每个角落静静为我开着
我曾以为我会永远守在他身旁
今天我们已经离去在人海茫茫
感兴趣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);
}
那片笑声让我想起我的那些花儿
在我生命每个角落静静为我开着
我曾以为我会永远守在他身旁
今天我们已经离去在人海茫茫
这个代码如下实现
$(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);
})
})
})
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">
class="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">
class="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">
class="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">
class="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实现评论框展开和隐藏功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
虽然,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;
}
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";
}
仔细看,不然你就会发现你需要点击两次才会出现想要的效果。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。