html文字折叠隐藏出现问题,javascript实现文字隐藏、展开收起的简单示例

感兴趣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);

}

那片笑声让我想起我的那些花儿

在我生命每个角落静静为我开着

我曾以为我会永远守在他身旁

今天我们已经离去在人海茫茫

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap的响应式布局导航栏自动折叠隐藏效果可以通过以下步骤来实现: 1. 在HTML文件中添加导航栏代码,使用Bootstrap提供的样式类实现基本的导航栏布局。 2. 使用Bootstrap提供的“navbar-toggle”样式类,创建一个按钮,用于在小屏幕设备下展开或者收起导航栏。 3. 使用Bootstrap提供的“collapse”样式类,来实现导航栏内容的自动折叠隐藏。在按钮上添加“data-target”属性和“#navbar-collapse”值,来指定需要折叠的导航栏内容。 4. 使用Bootstrap提供的JavaScript库,实现导航栏按钮的点击事件,使得点击按钮后可以展开或者收起导航栏内容。 下面是一个实现响应式布局导航栏自动折叠隐藏效果的示例代码: ``` <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <div class="collapse navbar-collapse" id="navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </nav> ``` 在上述示例代码中,“navbar-toggle”样式类创建了一个按钮,用于在小屏幕设备下展开或者收起导航栏。使用“collapse”样式类实现导航栏内容的自动折叠隐藏,并在按钮上添加“data-target”属性和“#navbar-collapse”值,来指定需要折叠的导航栏内容。 需要注意的是,为了使JavaScript库正常工作,需要在页面中引入Bootstrap提供的jQuery库和Bootstrap的JavaScript插件库。在HTML文件的底部添加以下代码,即可引入这两个库: ``` <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> ``` 通过上述步骤,即可实现Bootstrap的响应式布局导航栏自动折叠隐藏效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值