如何不通过类名或ID定位show more按钮上方的元素

你不需要通过class或id选择器定位上方的内容容器，直接利用DOM原生的节点相邻关系属性就能精准定位目标，比选择器写法更稳定。

核心实现逻辑 #

直接使用DOM元素的previousElementSibling属性，这个属性会返回当前元素在DOM树中紧邻的上一个同级元素节点，正好对应show more按钮上方的内容包裹容器，全程不需要写任何class/id选择规则。

修改后完整代码 #

<!-- 初始给内容容器设置固定最大高度+溢出隐藏，实现默认收起效果 -->
<div style="max-height: 120px; overflow: hidden;">
  <p> content </p>
  <div>
    <img src="images/image2.jpg">
  </div>
  <p> content </p>
</div>
<button onclick="this.previousElementSibling.style.maxHeight = 'none'; this.style.display = 'none'"> show more </button>

细节说明 #

• 初始的max-height值你可以根据实际展示需求自行调整，比如要默认展示3行文本就改成对应高度即可，overflow: hidden是实现收起效果的必要样式，不能漏
• 点击逻辑里的this.style.display = 'none'是点击后自动隐藏show more按钮，如果你需要保留按钮做收起切换，可以删掉这段，换成切换maxHeight的逻辑即可
• 注意不要误用previousSibling属性，这个属性会把元素之间的换行、空白文本也算作节点，很容易定位到错误目标，必须用previousElementSibling才能精准匹配元素节点
• 这个写法完全不依赖元素的class、id属性，哪怕后续你修改容器的类名、id，甚至代码里存在重复id的问题，都不会影响功能正常运行

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