如何用jQuery实现非直接兄弟元素的“查看更多”文本切换？

没问题，我们可以利用DOM的层级关系来关联按钮和目标文本元素——毕竟它们共享同一个父容器.section-right。下面是具体的实现步骤和代码：

首先，给我们添加的.morecontent加个初始隐藏的样式（你已经把截取后的后半段文本放在这个容器里了）：

.morecontent {
  display: none;
}

然后，编写完整的jQuery逻辑（保留你原有的文本截取代码，再添加点击切换逻辑）：

// 保留你原有的文本截取代码
var showChar = 100;
$('.more').each(function () {
  var content = $(this).html();
  if (content.length > showChar) {
    var c = content.substr(0, showChar);
    var h = content.substr(showChar, content.length - showChar);
    var html = c + '<span class="moreellipses">' + "..." + '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;</span>';
    $(this).html(html);
  }
});

// 新增点击切换文本的逻辑
$('.readMore').on('click', function() {
  // 通过共同父容器.section-right定位到当前模块的目标文本容器
  var $targetContent = $(this).closest('.section-right').find('.morecontent');
  var $buttonText = $(this).find('span');

  // 切换文本的显示/隐藏状态
  $targetContent.toggle();

  // 同步切换按钮文本，提升用户体验
  if ($targetContent.is(':visible')) {
    $buttonText.text('Less About');
    // 可选：如果需要切换箭头方向，取消注释并替换图片路径
    // $(this).find('img').attr('src', 'assets/images/leftArrow.png');
  } else {
    $buttonText.text('More About');
    // $(this).find('img').attr('src', 'assets/images/rightArrow.png');
  }
});

关键思路说明： #

• 因为按钮和目标<p>不是直接兄弟元素，我们用closest('.section-right')找到它们共同的父容器，这样能确保每个按钮只控制自己所在模块的文本（如果页面有多个类似模块，不会出现操作混乱的情况）。
• 用find('.morecontent')在父容器内精准定位到需要切换的文本容器，调用toggle()方法就能一键实现显示/隐藏的切换。
• 额外添加了按钮文本的切换逻辑，让用户能清晰感知当前操作状态，你也可以根据需求加上箭头图标的方向切换。

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