jQuery 点击父节点展开jsTree节点

在本文中，我们将介绍如何使用jQuery来实现当点击父节点时展开jsTree节点的功能。jsTree是一个非常流行的JavaScript插件，用于创建可扩展的、交互式的树状结构。

jsTree简介

jsTree是一个基于jQuery的强大树状结构插件，它允许我们以简洁和灵活的方式创建动态树形视图。我们可以使用jsTree来展示树形数据、文件和文件夹结构、目录导航等等。

准备工作

在开始之前，我们需要做以下准备工作：
1. 引入jQuery和jsTree插件的库文件。你可以从jsTree官方网站（https://www.jstree.com/）下载最新版本的jsTree。
2. 在HTML文档中创建一个容器元素，用于承载jsTree。

<div id="treeContainer"></div>

在JavaScript中，使用jQuery选择器选中我们刚创建的容器元素，并调用jsTree插件的初始化方法。

$(function() {
  $('#treeContainer').jstree();
});

这样就完成了基本的准备工作，我们现在可以开始编写代码来实现当点击父节点时展开jsTree节点的功能了。

实现展开节点功能

为了实现当点击父节点时展开jsTree节点的功能，我们需要监听父节点的点击事件，并在事件回调函数中展开相应的节点。

首先，我们需要为jsTree添加一个事件监听器，监听父节点的点击事件。可以通过on方法来实现。

$('#treeContainer').on('click', 'li.jstree-closed > a', function() {
  var node = $(this).parent();

  // 展开节点
  $('#treeContainer').jstree('open_node', node);
});

在上面的示例中，我们使用了事件委托的方式，只在#treeContainer元素中监听点击事件。li.jstree-closed > a选择器用于选中所有未展开的父节点。当父节点被点击时，我们获取到该节点，并使用jstree('open_node', node)方法展开该节点。

现在，当我们点击父节点时，会展开对应的子节点。

示例

下面是一个完整的示例，展示了如何使用jQuery实现当点击父节点时展开jsTree节点的功能。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Expand jsTree node on parent click</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/themes/default/style.min.css" />
</head>
<body>
  <div id="treeContainer"></div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/jstree.min.js"></script>
  <script>
    (function() {
      // 初始化jsTree('#treeContainer').jstree();

      // 监听父节点点击事件，展开节点
      ('#treeContainer').on('click', 'li.jstree-closed>a', function() {
        var node =(this).parent();
        $('#treeContainer').jstree('open_node', node);
      });
    });
  </script>
</body>
</html>