时间戳

首页 > 解决方案 > 我的页面底部有一个可折叠元素，当我单击以折叠它时，它不会锚定到新打开的元素

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

问题描述

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

我在 google chrome 版本 75.0.3770.90 上使用 bootstrap 4。

经过一番挖掘，我认为通过设置 href=idOfControl 它将锚定到该元素。但这不起作用，所以我一定误解了这一点。

在这个jQuery 滚动到元素之后，我也尝试了一些 jquery 。没运气。

这是一个演示，您可以看到单击按钮时它不会自动锚定/滚动到新显示的文本。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>

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

标签： cssbootstrap-4

解决方案

我认为这是由 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>

推荐阅读