如何通过条件语句修改元素？实现文本展开收起功能示例

不用额外写复杂逻辑，直接把提供的两段参考代码按状态判断拼接即可，完全兼容已经上线的more展开功能，落地步骤如下：

• 先确认HTML结构匹配类名操作规则
  每个内容块用独立容器包裹（参考代码里的#q1就是单个内容块的ID），块内必须包含4个元素：截断显示的短文本、完整长文本、「更多（more）」触发按钮、「收起（less）」触发按钮。所有默认需要隐藏的元素提前加上hidden类：默认收起状态下，长文本、less按钮加hidden类；展开状态下，短文本、more按钮加hidden类。
• 用提供的if/else语法编写点击交互逻辑
  核心是点击按钮时先判断当前内容是展开还是收起状态，再对应执行类名增删操作。你拿到的类名操作代码本身就是展开状态的切换逻辑，直接放到对应分支里，反向写收起逻辑即可，参考实现如下：

// 绑定两个按钮的点击事件
$("#q1 .more, #q1 .less").on("click", function(){
  // 以more按钮是否带有hidden类判断当前展示状态
  if( $("#q1 .more").hasClass("hidden") ){
    // 当前为展开状态，执行收起操作
    $("#q1 .less").addClass("hidden");
    $("#q1 .more").removeClass("hidden");
    $("#q1 .full-text").addClass("hidden");
    $("#q1 .truncate-text").removeClass("hidden");
  } else {
    // 当前为收起状态，执行展开操作，直接使用提供的类名操作代码即可
    $("#q1 .less").removeClass("hidden");
    $("#q1 .more").addClass("hidden");
    $("#q1 .full-text").removeClass("hidden");
    $("#q1 .truncate-text").addClass("hidden");
  }
})

• 补全hidden类的基础样式
  要保证类名切换后隐藏效果生效，在CSS文件里加一行规则即可：

.hidden {
  display: none;
}

如果页面有多个内容块，只要把上面代码里的#q1换成对应块的ID，或者给所有内容块加统一类名批量绑定事件即可，不用修改单块的核心逻辑。

内容的提问来源于stack exchange，提问作者popcornlover12