js实现展开全部内容,收起全部内容

整理一个昨天做的案例,虽然很简单我感觉我这个脑子有必要整理一下,不然睡一觉又忘记了,这个是关于移动端页面中,如果模块中内容过多,首先展示部分,用户自己选择看不看全部的一个小功能。

首先看看这个页面的效果吧,如下图所示:
在这里插入图片描述
下面一起来看一下代码吧

html部分(css样式就不在这里写了,需要自行下载)

<div class="con">
    <p class="intro_title">就让我们,晚点在一起。然后一辈子。</p>
    <p class="intro_content more_h">
        不需要晚多久,就再过那么几年,那时我们有稳定的收入,靠谱的工作,所有的一切步入正轨、我不再是一个追梦的漂浮的女生,而是一个只寻求安稳生活的女人,你不再是一个青涩的毛头小伙子,而是一个成熟的男人。
        <br />
        到那个时候,我们在相爱、
        <br />
        如果,我们可以晚一些相遇。<br />
        不需要多久,就在过那么几年,那时候我们已经学会了知足学会了包容和珍惜,而你也真的能从容的面对那些不追逐你的异性、
        <br />
        到那时候,那时候我们在相爱、
    <
  • 1
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
可以通过给节点添加一个状态属性,然后根据状态属性来判断节点应该是展开还是收起状态。当点击节点时,切换节点的状态属性,并根据状态属性来进行相应的节点展开收起操作。 以下是一个简单的实现示例: HTML结构: ``` <ul> <li class="node"> <span class="toggle">+</span> <span class="text">节点1</span> <ul class="children"> <li>子节点1</li> <li>子节点2</li> </ul> </li> <li class="node"> <span class="toggle">+</span> <span class="text">节点2</span> <ul class="children"> <li>子节点1</li> <li>子节点2</li> </ul> </li> </ul> ``` CSS样式: ``` ul { list-style: none; } .node .toggle { display: inline-block; width: 20px; text-align: center; cursor: pointer; } .node .text { margin-left: 5px; } .children { display: none; } ``` JS代码: ``` // 获取所有节点 var nodes = document.querySelectorAll('.node'); // 对每个节点进行处理 nodes.forEach(function(node) { // 获取节点的toggle和children元素 var toggle = node.querySelector('.toggle'); var children = node.querySelector('.children'); // 初始状态为收起 var isExpanded = false; // 点击toggle切换状态 toggle.addEventListener('click', function() { if (isExpanded) { children.style.display = 'none'; toggle.innerText = '+'; isExpanded = false; } else { children.style.display = 'block'; toggle.innerText = '-'; isExpanded = true; } }); }); ``` 这样,当用户点击节点的toggle时,就会切换节点的展开收起状态,并相应地展开收起节点的子节点。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

撸猫@冒泡泡

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值