У меня есть сворачиваемый элемент внизу моей страницы, и когда я щелкаю его, чтобы свернуть, он не привязывается к вновь открытому элементу

Question

У меня есть элемент внизу моей HTML-страницы.По умолчанию этот элемент не свернут.Когда я нажимаю на стрелку чуть выше упомянутого элемента, он отображается.Однако вновь свернутый элемент все еще находится «ниже сгиба».Таким образом, пользователь не имеет ни малейшего представления, что нажатие на стрелку сделало что-либо, если они не прокрутят вниз.

Я использую bootstrap 4 в версии Google Chrome 75.0.3770.90.

После некоторого копания я подумал, что, установив 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>

Короче говоря, я хотел бы автоматически привязать / прокрутить до конца недавно открытого элемента.

Answer 1

Я думаю, что это вызвано событиями .preventDefault и event.stopPropagation в Jquery Function.

Я предлагаю это решение:

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>