Question

此手风琴包含一个显示div onclick的无序列表。单击另一个列表项将关闭先前打开的div。我遇到的问题是内容向上滚动（在Safari / iOS和Firefox中）因为前一个链接已关闭。

“手风琴”在Chrome中应该正常工作，不会在上一个链接关闭后向上滚动div - fiddle here

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

为了让事情变得有点棘手，手风琴存在于基于百分比的div中，该div设置为overflow：auto;

有没有人知道在Safari，Firefox等中复制Chromes行为的方法？

$('.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');
});

此外，您不需要在锚标记内部使用按钮。

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

在先前打开的div关闭后，简单的手风琴滚动到顶部

1 个答案: