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

Question

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

图三

Answer 1

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

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

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

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

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

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

   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属性来获取折叠面板内容的实际高度。

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