当前位置：首页 > 文章列表 > 文章 > 前端 > jQuery实现显示更多功能详解

jQuery实现显示更多功能详解

2025-09-16 11:56:15 0浏览收藏

推广推荐

支持 PC / 移动端，安全直达

一分耕耘，一分收获！既然打开了这篇文章《jQuery 如何实现“显示更多”功能》，就坚持看下去吧！文中内容包含等等知识点...希望你能在阅读本文后，能真真实实学到知识或者帮你解决心中的疑惑，也欢迎大佬或者新人朋友们多留言评论，多给建议！谢谢！

jQuery 如何访问子级 DIV：实现“显示更多”功能的通用方法

本文旨在提供一种通用的 jQuery 方法，用于访问嵌套在多层父级元素下的子级 DIV，并以实现“显示更多/显示更少”功能为例进行演示。通过修改 DOM 遍历方式，使得代码能够适应更复杂的 HTML 结构，从而提高代码的复用性和健壮性。

问题背景与解决方案

在网页开发中，经常会遇到需要控制某个 DIV 元素的显示与隐藏，例如实现“显示更多”功能。通常的做法是，通过 jQuery 选择器找到触发事件的元素（例如，一个链接），然后根据其父元素的层级关系，找到需要操作的 DIV 元素。但是，当 HTML 结构发生变化，例如在目标 DIV 外面增加一层 wrapper，原有的 jQuery 代码可能就会失效。

为了解决这个问题，我们需要一种更通用的方法来访问目标 DIV 元素，而无需依赖于固定的父元素层级关系。本文将介绍如何使用 parentNode 和 querySelector 方法来实现这一目标。

使用 parentNode 和 querySelector

核心思路是：从触发事件的元素开始，向上遍历 DOM 树，直到找到一个合适的父元素（例如，包含所有相关元素的容器），然后在这个父元素下使用 querySelector 方法来查找目标 DIV 元素。

以下是一个具体的示例：

HTML 结构：

<div class="text-container">
  <h1>Title goes here</h1>
  <h2>Subtitle</h2>
  <div class="wrapper">
    <div class="content hideContent">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr...
      <p>Some more text</p>
      <ul>
        <li>Some more text</li>
        <li>Some more text</li>
        <li>Some more text</li>
      </ul>
    </div>
  </div>
  <div class="show-more">
    <a href="#">Show more</a>
  </div>
</div>

jQuery 代码：

$(".show-more a").on("click", function() {
  let div = this.parentNode.parentNode.querySelector('.content');
  let classes = ['showContent', 'hideContent'];

  if (div.classList.contains(classes[0])) {
    div.classList.replace(classes[0], classes[1]);
  } else {
    div.classList.replace(classes[1], classes[0]);
  }

  this.textContent = this.textContent == 'Show more' ? 'Show less' : 'Show more';
});

CSS 代码：

.showContent {
  display: block;
}

.hideContent {
  display: none;
}

代码解释：

$(".show-more a").on("click", function() { ... });: 这部分代码选择所有 class 为 show-more 的元素下的标签，并绑定一个点击事件处理函数。
let div = this.parentNode.parentNode.querySelector('.content');: 这是核心代码。this 指的是被点击的标签。this.parentNode 获取其父元素（即
），然后再次使用 parentNode 获取
的父元素，也就是
。最后，使用 querySelector('.content') 在
元素下查找 class 为 content 的元素。
let classes = ['showContent', 'hideContent'];: 定义一个包含两个 class 名称的数组，用于切换 DIV 的显示状态。
if (div.classList.contains(classes[0])) { ... } else { ... }: 判断 DIV 当前是否包含 showContent class。如果包含，则替换为 hideContent；否则，替换为 showContent。 classList.replace 是 JavaScript 中用于替换元素 class 的方法。
this.textContent = this.textContent == 'Show more' ? 'Show less' : 'Show more';: 根据 DIV 的显示状态，更新链接的文本内容。

替代方案：使用 closest() 和 find()

除了 parentNode 和 querySelector 之外，还可以使用 jQuery 提供的 closest() 和 find() 方法来实现相同的功能。

$(".show-more a").on("click", function() {
  var $this = $(this);
  var $container = $this.closest(".text-container"); // 向上查找最近的 .text-container
  var $content = $container.find(".content"); // 在 .text-container 下查找 .content
  var linkText = $this.text().toUpperCase();

  if (linkText === "SHOW MORE") {
    linkText = "Show less";
    $content.switchClass("hideContent", "showContent", 400);
  } else {
    linkText = "Show more";
    $content.switchClass("showContent", "hideContent", 400);
  };

  $this.text(linkText);
});

代码解释：