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

jQuery实现显示更多功能详解

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

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

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

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

问题背景与解决方案

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

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

使用 parentNode 和 querySelector

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

以下是一个具体的示例：

HTML 结构：


  Title goes here
  Subtitle
  
    
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr...
      Some more text
      
        Some more text
        Some more text
        Some more text
      
    
  
  
    Show more

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);
});

代码解释：