我想在点击折叠面板的时候，然后设置这个折叠面板的展开高度

我想在点击折叠面板的时候，先拿到这是第几个面板，然后设置这个折叠面板的展开高度，该怎么实现。
图二

图三

您可以将折叠面板的点击事件绑定到一个函数上，在函数中进行高度的设置。具体步骤如下：

给每个折叠面板添加一个点击事件监听器。

<div class="panel" onclick="togglePanel(this)">
  <!-- 折叠面板内容 -->
</div>

在点击事件处理函数中获取当前点击的折叠面板所在的位置。

function togglePanel(panel) {
  // 获取当前点击的折叠面板在所有折叠面板中的位置
  const index = Array.from(document.querySelectorAll('.panel')).indexOf(panel);
  // ...
}

根据当前折叠面板的状态设置展开高度。

function togglePanel(panel) {
  // 获取当前点击的折叠面板在所有折叠面板中的位置
  const index = Array.from(document.querySelectorAll('.panel')).indexOf(panel);
  // 获取当前折叠面板的展开状态
  const isExpanded = panel.classList.contains('expanded');
  // 计算折叠面板展开的高度
  const contentHeight = isExpanded ? 0 : panel.scrollHeight;
  // 设置折叠面板的展开高度
  panel.style.height = `${contentHeight}px`;
  // 切换折叠面板的展开状态
  panel.classList.toggle('expanded');
}

在上面的处理函数中，我们使用了classList属性来切换折叠面板的展开状态，使用scrollHeight属性来获取折叠面板内容的实际高度。

当然，以上代码只是简单的示例代码，实际开发中还需要按照具体需求进行相应的调整。

不知道你这个问题是否已经解决, 如果还没有解决的话:

这个问题的回答你可以参考下: https://ask.csdn.net/questions/780059
我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：前端实现模糊查询，防抖提高程序运行效率
除此之外, 这篇博客: 面试题目中的 7. 标题什么是高阶组件、受控组件、非受控组件？ 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:
高阶组件
是个函数，输出结果是个新组件，可以对输入的组件就行加工，并返回一个具有特定功能的组件。
受控组件
相当于input中的value值通过state值获取，onChange事件改变state中的value值。实现了双向绑定，任意一方的数据发生变化，另一方也会随之改变。
非受控组件
不需要设置对应的state属性，可通过ref来直接操作真是的dom。
您还可以看一下林晓炜老师的网络安全工程师演示：搜索引擎的高级搜索使用技巧课程中的搜索引擎高级使用技巧【一】小节, 巩固相关知识点

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^