css - 我的页面底部有一个可折叠元素，当我单击以折叠它时，它不会锚定到新打开的元素

Question

我的 html 页面底部有一个元素。默认情况下，此元素不会折叠。当我单击上述元素上方的箭头时，它会显示。但是，新收起的元素仍处于“首屏之下”。所以用户不知道点击箭头做了什么，除非他们向下滚动。

我在谷歌浏览器版本 75.0.3770.90 上使用 Bootstrap 4。

经过一些挖掘，我认为通过设置 href=idOfControl 它将锚定到该元素。那是行不通的，所以我一定是误解了。

我在这之后尝试了一些 jquery jQuery scroll to element以及。没有运气。

这是一个演示，您可以看到当单击按钮时它不会自动锚定/滚动到新显示的文本。 https://jsfiddle.net/huntermaxfield/cnj2m86f/

这是我的实际代码:

<div class="row" style="margin-top: 0px;">
        <div class="col" style="margin: 0;">
          <div class="my-5">
            <ul class="list-group list-group-flush collapse table"  id="collapseExample1">
              <li class="list-group-item px-0" style="background: beige;">
                <a class="btn collapsed collapsible-custom-sections" data-toggle="collapse">
                  <div class="spacing-in-collapse-menu">Channel</div>
                  <div class="spacing-in-collapse-menu">Actual</div>
                  <div class="spacing-in-collapse-menu">Forecasted</div>
                  <div class="spacing-in-collapse-menu">Delta</div>
                </a>
              </li>
             </ul>
            </div>
          </div>
        </div>

简而言之，我想自动锚定/滚动到新打开的元素的底部。

Answer 1

我认为这是由 Jquery 函数上的 event.preventDefault 和 event.stopPropagation 引起的。

我建议这个解决方案:

let btns = document.querySelectorAll(".btn");

btns.forEach((e) => {
	e.addEventListener("click", function () {
  	if (document.querySelector("#collapseExample").classList.contains("show")) {
    	document.querySelector("#collapseExample").classList.remove("show");
    } else {
      document.querySelector("#collapseExample").classList.add("show");
      window.scrollTo({
        top: document.querySelector("#collapseExample").offsetTop,
        behavior: "smooth"
      })
    }
  })
})

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

.stuff {
  height: 400px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="stuff">

</div>

<p>
  <a class="btn btn-primary">
    Link with href
  </a>
  <button class="btn btn-primary">
    Button with data-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>