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

我的html页面底部有一个元素。默认情况下，此元素不会折叠。当我单击上述元素上方的箭头时，它会显示出来。但是，新折叠的元素仍处于“折叠之下”。因此，用户不知道单击箭头不会做任何事情，除非他们向下滚动。

我正在Google Chrome版本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>

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

最佳答案

我认为这是由Jquery Function上的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>