精华内容
下载资源
问答
  • javascript实现文字隐藏展开收起的简单示例
    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实现点击展开点击隐藏的效果代码内容,有兴趣的朋友参考下。
  • 主要介绍了JS实现鼠标点击展开隐藏表格行的方法,实例分析了javascript操作table表格与css样式的技巧,需要的朋友可以参考下
  • 本文实例讲述了jQuery实现点击显示隐藏下拉菜单功能。分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>toggle</...
  • 这个代码如下实现 $(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实现网页上可点击展开、关闭的左侧广告代码,表现形式类似对联广告,不过操作方式不一样,点击时候会隐藏在屏幕在左侧,但是不是完全隐藏,仍显示一个图片竖条的广告,而且点击“显示”的时候,它会...
  • 1.效果图如下所示,点击评论会在对应的评论区域展开评论输入框,点击取消会取消对应的评论输入框2.html代码:需要引入jQuery.jsclass="nr-comment">class="nr-comment-con">class="nr-comment-nav">class=...

    1.效果图如下所示,

    点击评论会在对应的评论区域展开评论输入框,点击取消会取消对应的评论输入框

    85b88dbb9307c98871a2e29bb5103c0a.png

    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:30

    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">

    2017.10.01 21:32:30

    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">

    2017.10.01 21:32:30

    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">

    2017.10.01 21:32:30

    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实现评论框展开和隐藏功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

    展开全文
  • 我最近就遇到做个点击展开二级菜单的要求,当然只能用原生的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";

    }

    仔细看,不然你就会发现你需要点击两次才会出现想要的效果。

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    展开全文
  • 今天一个zblog模板用户提出再模板中需要加入一个菜单展开/显示、收缩/隐藏功能,点击展开,再次点击就可以关闭的导航菜单,如下图所示:这样的特效必须使用到JS才行,使用jQuery最佳!所以上方这段特效所需要的...
  • 这是个大多数网站很常见的功能,点击页面右上角头像显示一个悬浮菜单,点击页面其他位置或再次点击头像则菜单隐藏。 作为一个jQuery前端攻城狮实现这个功能可以说是很easy了,但是对只刚粗看了一遍vue文档的菜鸟来...
  • 在展示大量文本的时候,很多网站会在页面上出现一个展开全文的... 它旁边的点击展开全文默认隐藏 , 超过高度展示 .展开全文点击后更换文字内容为收起全文下面直接展示代码:1、html的div文本内容比如是这样内容.........
  • 前言:本章说下文字内容的展开与收起的实现,要实现这么一个效果:当收起的时候隐藏并显示省略号,当展开的时候显示全部文字。先看下效果图:小程序 — 展开/收起1、结构样式(1)首先我们定义一下html结构:标题标题...
  • 漂亮实用的jQuery网页在线QQ客服代码,默认不展开点击展开),可以放3个客服QQ、当页面宽度小于1024像素时候自动隐藏,样式很漂亮,js代码推荐下载!
  • 纯css实现网页内容的隐藏点击后下拉查看 在我们进行网页开发的时候经常会有这样的需求,我们一段文本内容可能会比较冗长,为了提升用户体验,我们必须考虑到并非所有用户都喜欢,都需要去查看所有文本内内容,但...
  •  web页面中,我们一般不用select、option来实现下拉菜单效果,因为下拉框的样式丑且难以美化,所以我们选择控制ul显示隐藏实现同样且高大上的效果,但是不能像下拉框那样点击页面其他部分,下拉菜单收起或隐藏,...
  • 开发工具与关键技术:DW JavaScript鼠标点击实现展开与收起”效果 作者:赖文扬 撰写时间:2019年1月17日 用 JavaScript 代码来实现一下鼠标点击展开与收起”的效果,首先要 创建html文件,然后再一个...
  • js点击显示隐藏内容body{font-size:12px;}span{font-weight:bold;}details{overflow:hidden;height:0;padding-left:200px;position:relative;display:block;}details[open]{height:auto;}点击显示内...
  • 实现效果大概是多个卡片默认均隐藏详情部分,点击展开可查看该卡片详情,点击收起详情隐藏;同时只展开一个,即某个展开时其他的均收缩状态。 设计思路: 详情模块与展开按钮各设置两个样式类,即默认样式类与展开...
  • 【需求】 如果大家登录过 我傲:http://www.woall.com 新浪博客等 就会发现可以点击栏目标题,就会发现栏目可以展开和收起,非常好用!其实这个功能实现起来很简单.重点就是要找到要隐藏的Table行,对它的display属性进行...
  • 今天分享个更好用的,需要jquery支持:重点:文字...jQuery文本段落展开和折叠效果#wrapm{overflow:hidden;}#read-more{text-align:center;}$(function(){varslideHeight=78;//pxvardefHeight=$('#wrapm').height(...
  • 163网盘折叠菜单*******div显示隐藏效果*********层展开关闭-运动缓冲效果**********动画效果打开层 关闭层************腾讯页内弹出窗口效果....... 开源程序 简约而不简单!对于学习html,提高兴趣非常有好处!......
  • HTML实现点击展开和收起

    万次阅读 2014-07-04 16:00:42
    #box,#box2,#box3,#box4{padding:10px;...//===========================点击展开关闭效果==================================== function openShutManager(oSourceObj,oTargetObj,shutAble,oOpenT
  • 具体分析如下:这是很人性化的一款特效代码,实现点击其中一个父级,另一个之前打开的父级会自动关闭jQuery表格展开折叠,默认折叠table{ border:0;border-collapse:collapse;}td{ font:normal 12px/17px Arial;...
  • 用JS+CSS写左侧可隐藏展开、折叠菜单代码 - www.webdm.cnvar maxmnus = 5function opTab(){var mnu = document.getElementById("menubar")var arrdiv = document.getElementById("arrow")var arrtxt = document....
  • 最近在学习js的过程中越来越感受到jQuery的魅力,这个著名的js框架极大的简化了JavaScript编程,本来需要用复杂原生js代码实现的效果可以用jQuery轻松实现,今天分享一小段经典的点击折叠展开内容特效。看这个例子:...
  • jQuery实现的一款网页物资,网页内容或文章标题隐藏、显示的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...
  • 在展示大量文本的时候,很多网站会在页面上出现一个展开全文的文字按钮 , 点击这个按钮才会展开全部内容 . ... 它旁边的点击展开全文默认隐藏 , 超过高度展示 . 展开全文点击后更换文字内容为收起全...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,543
精华内容 3,417
关键字:

网页实现点击展开隐藏实现