css - 单击时水平 Accordion 链接向下滚动页面到底部

Question

我是一个绝对的新手，所以请多多包涵。我读了很多我认为这里的帖子可能与我的问题有关，但我很难理解所提供的解决方案。

我正在尝试仅使用 CSS 创建一个点击式水平 Accordion 。使用 Firefox，它工作得很好。问题出现在 Chrome 和 Safari 中。

问题是每次单击链接时，页面几乎都会向下滚动到页面底部，您需要向上滚动才能看到全部内容。链接如下所示:

 <h2><a href="#accordion1">title1</a></h2>

不用说，这对用户来说是非常烦人的。我在某处读到这可以避免使用 JavaScript preventDefault()。我该怎么做？还有哪些其他方法可以防止这种情况发生？

Answer 1

编辑 - 所以它似乎 preventDefault() 取消了所有默认行为(实际上有意义) - 我提出的第一个解决方案结果证明根本不是解决方案。

所以，这实际上证明很难做到。

经过一番搜索后，我得出结论，如果不取消链接默认行为(因此是 .preventDefault() 中的默认行为)，则不可能取消滚动。

您可以做的是在链接滚动完成后滚动回到您所在的位置，但即使您尽快这样做，您仍然可以在浏览器上看到滚动 - 所以这是一个丑陋的解决方案。 (无论如何你都可以在这里看到它 - http://jsfiddle.net/joplomacedo/RpDyc/)。

那么，替代方案？因为当你这样做时(我假设你在这里使用 :target 伪类)你仍然需要 javascript，然后忘记 :target 的东西并单独依赖 javascript。它更简单、更干净、更少“hacky”。​​

这是我的做法 (jquery) -> http://jsfiddle.net/joplomacedo/AfzJY/

如果您坚持使用 CSS，那么我建议按照 Chris Coyier 的建议进行操作 here不利用 :target 而是利用 :checked。我不会在这里进一步展开，因为他的文章在这方面做得很好。

编辑前

你在使用 jquery 吗？如果是这样，您只需要:

$('a[href="#accordion1"]').on('click', function (e) {
   e.preventDefault();
});

如果您不使用 jquery，那么这里是使用纯 javascript 的方法:

var cancels_links = document.getElementsByClassName('cancels-link');

var cancel = function cancel(e) {
    e.preventDefault();
};

for (var i = 0, max = cancels_links.length; i < max; i++) {
    cancels_links[i].addEventListener('click', cancel, false );
}

...这需要您将 class="cancels-link" 添加到每个要取消默认行为的“a”元素。

这是两个解决方案的 fiddle -> http://jsfiddle.net/cBQnv/3/