Accordion JS 问题 - 单击时它会打开到手风琴的底部，而不是停留在我单击的顶部

Question

手风琴有问题，当我打开手风琴时，它会滚动到底部，而不是停留在我单击并展开的位置。 我认为可能是 b/ci 网站上的其他 JS 可能存在冲突，但我从下面的 codepen 中删除了它并尝试了它，但我仍然看到同样的问题。

更新： Codepen并在下面查看有关如何测试它以了解我的意思的说明：

如前所述，该站点还有其他 JS 放入 codepen，但如果您删除它，您会看到问题仍然存在。

查看 Codepen 链接时，在右侧，即不相关的 JS 用于站点上的其他方面。 实际的 Accordion Javascript 位于 CODEPEN 最底部（HTML 底部）的 HTML 面板上。

看看我所看到的：

• 打开第 2 节
• 然后向下滚动到第 3 部分并单击它打开它，您会看到它自动滚动到第 3 部分的底部。

或者

• 在第 3 部分打开的情况下，尝试打开第 4 部分，它会滚动到底部而不是停留在顶部。

我希望第一个手风琴在到达它所在的部分时打开，但是当里面的东西高于屏幕的高度时，它似乎有问题。

我希望如果单击 Accordion Title 4，它会停留在屏幕上的同一点，而不是将我带到面板的底部。

现在，例如，如果我单击手风琴 3，它会将我带到手风琴的底部，我必须向上滚动到手风琴 3 的标题。 如前所述，似乎只有当面板的高度高于 100VH 的高度时才会这样做或有这个问题

重要提示：似乎当所有手风琴面板都关闭时，我尝试打开一个它不会这样做。 例如，我重新加载了页面，默认情况下第一个手风琴是打开的，我试图打开最后一个在我的真实代码中有联系表单的页面，它有滚动到面板底部的问题。 如果我关闭了第一个，并且它们都关闭了，它似乎没有那个问题

任何帮助，将不胜感激！ 谢谢！

底部 HTML 面板（左）上手风琴的 JS 是

  // W3C's JS Code
  var acc = document.getElementsByClassName("accordion");
  var i;
    
  // Open the first accordion
  var firstAccordion = acc[0];
  var firstPanel = firstAccordion.nextElementSibling;
  firstAccordion.classList.add("active");
  firstPanel.style.maxHeight = firstPanel.scrollHeight + "px";

  // Add onclick listener to every accordion element
  for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function() {
      // For toggling purposes detect if the clicked section is already "active"
      var isActive = this.classList.contains("active");

      // Close all accordions
      var allAccordions = document.getElementsByClassName("accordion");
      for (j = 0; j < allAccordions.length; j++) {
        // Remove active class from section header
        allAccordions[j].classList.remove("active");

        // Remove the max-height class from the panel to close it
        var panel = allAccordions[j].nextElementSibling;
        var maxHeightValue = getStyle(panel, "maxHeight");
      
      if (maxHeightValue !== "0px") {
          panel.style.maxHeight = null;
        }
      }

      // Toggle the clicked section using a ternary operator
      isActive ? this.classList.remove("active") : this.classList.add("active");

      // Toggle the panel element
      var panel = this.nextElementSibling;
      var maxHeightValue = getStyle(panel, "maxHeight");
      
      if (maxHeightValue !== "0px") {
        panel.style.maxHeight = null;
      } else {
        panel.style.maxHeight = panel.scrollHeight + "px";
      }
    };
  }
  
  // Cross-browser way to get the computed height of a certain element. Credit to @CMS on StackOverflow (http://stackoverflow.com/a/2531934/7926565)
  function getStyle(el, styleProp) {
  var value, defaultView = (el.ownerDocument || document).defaultView;
  // W3C standard way:
  if (defaultView && defaultView.getComputedStyle) {
    // sanitize property name to css notation
    // (hypen separated words eg. font-Size)
    styleProp = styleProp.replace(/([A-Z])/g, "-$1").toLowerCase();
    return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
  } else if (el.currentStyle) { // IE
    // sanitize property name to camelCase
    styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) {
      return letter.toUpperCase();
    });
    value = el.currentStyle[styleProp];
    // convert other units to pixels on IE
    if (/^\d+(em|pt|%|ex)?$/i.test(value)) { 
      return (function(value) {
        var oldLeft = el.style.left, oldRsLeft = el.runtimeStyle.left;
        el.runtimeStyle.left = el.currentStyle.left;
        el.style.left = value || 0;
        value = el.style.pixelLeft + "px";
        el.style.left = oldLeft;
        el.runtimeStyle.left = oldRsLeft;
        return value;
      })(value);
    }
    return value;
  }
}

Answer 1

这是一种解决方法，有效，但不是很顺利，我相信您需要更改为可点击元素始终位于同一位置的方式，因为内容很长。 例如选项卡而不是手风琴，其中选项卡将始终位于顶部，内容将在下方切换。

这里是：

为每个手风琴添加一个id ，例如：

<button id="section1" class="accordion">Section 1</button>

<button id="section2" class="accordion">Section 2</button>

and so forth..

并将这段代码添加到acc[i].onclick = function() { }中 function

setTimeout(() => {
        location.href = "#" + accordions[i].id;
      }, 200);

例如，当我们使用location.href = "#someid"时，浏览器将 position 页面显示具有该 ID 的元素。