javascript - 简单 Accordion 在先前打开的 div 关闭后滚动到顶部

Question

这个 Accordion 由一个显示 div onclick 的无序列表组成。单击另一个列表项会关闭之前打开的 div。我遇到的问题是内容向上滚动(在 Safari/iOS 和 Firefox 中)，因为之前的链接已关闭。

“ Accordion ”在 Chrome 中正常工作，在上一个链接关闭后不向上滚动 div – fiddle here

但是，如果您在 safari 或 Firefox 中打开 fiddle ，您将看到新打开的 div 滚动到顶部。

为了让事情变得有点诡计， Accordion 存在于一个基于百分比的 div 中，该 div 被设置为 overflow:auto；

有谁知道在 Safari、Firefox 等中复制 Chrome 行为的方法吗？

$('.tog').click(function() {
  $(this).closest('li').siblings().find('.tog').removeClass('active').next('div').hide();
  $(this).toggleClass("active").next('div').slideToggle(250);
});

body {
  background: gray;
  padding: 0;
  margin: 0
}

.structure {
  position: absolute;
  overflow: auto;
  width: 100%;
  height: 70%;
  margin-top: 10%;
  background: yellow
}

ul {
  padding: 0;
  list-style: none;
}

ul li {
  margin-bottom: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

button {
  position: relative;
  cursor: pointer;
  display: block;
  width: 100%;
  padding-bottom: 0;
  margin-bottom: 0;
  border: none;
  outline: none;
  text-align: left;
  background: none;
  font-size: 2rem;
}

.projCont {
  float: left;
  width: 100%;
  height: 1000px;
  display: none;
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="structure">
  <ul>
    <li class="shower" id="one">
      <a class="tog" href="#one" onclick="return false;">
        <button>title of project 1</button>
      </a>
      <div class="projCont">
      </div>
    </li>
    <li class="shower" id="two">
      <a class="tog" href="#two" onclick="return false;">
        <button>title of project 2</button>
      </a>
      <div class="projCont">
      </div>
    </li>
    <li class="shower" id="three">
      <a class="tog" href="#three" onclick="return false;">
        <button>title of project 3</button>
      </a>
      <div class="projCont">
      </div>
    </li>
    <li class="shower" id="four">
      <a class="tog" href="#four" onclick="return false;">
        <button>title of project 4</button>
      </a>
      <div class="projCont">
      </div>
    </li>
    <li class="shower" id="five">
      <a class="tog" href="#five" onclick="return false;">
        <button>title of project 5</button>
      </a>
      <div class="projCont">
      </div>
    </li>
    <li class="shower" id="six">
      <a class="tog" href="#six" onclick="return false;">
        <button>title of project 6</button>
      </a>
      <div class="projCont">
      </div>
    </li>
    <li class="shower" id="seven">
      <a class="tog" href="#seven" onclick="return false;">
        <button>title of project 7</button>
      </a>
      <div class="projCont">
      </div>
    </li>
    <li class="shower" id="eight">
      <a class="tog" href="#eight" onclick="return false;">
        <button>title of project 8</button>
      </a>
      <div class="projCont">
      </div>
    </li>
  </ul>
</div>

Answer 1

您正在隐藏当前事件面板 (.hide()) 而没有任何过渡，并在 250 毫秒延迟 (slideToggle(250)) 中打开新面板。

这会导致滚动问题。

要解决此问题，您可以在同一时间范围内过渡到两个面板或从两个面板中删除过渡。

移除过渡

$(this).closest('li').siblings().find('.tog').removeClass('active').next('div').hide();
$(this).toggleClass("active").next('div').show();

有过渡

$(this).closest('li').siblings().find('.tog').removeClass('active').next('div').slideUp(250);
$(this).toggleClass("active").next('div').slideDown(250);

可以这样写，更简洁易懂

$('.tog').click(function(e) {
  e.preventDefault();

  var isCurrentPanelActive = $(this).next('.projCont').hasClass('active');

  if (isCurrentPanelActive) {
    return;
  }

  $('.structure .active').slideUp();
  $(this).next('.projCont').slideDown().addClass('active');
});

此外，您不需要 anchor 标记内的按钮。

<ul>
    <li class="shower" id="one">
      <a class="tog">
                    title of project 1
             </a>
      <div class="projCont">
      </div>
    </li>
</ul>