<ol> 上的引导折叠总是导致滚动到顶部答案

【问题标题】：Bootstrap collapse on <ol> always causes scroll to top<ol> 上的引导折叠总是导致滚动到顶部
【发布时间】：2012-10-22 12:59:39
【问题描述】：

任何人都可以告诉为什么引导崩溃会导致滚动条在触发崩溃时重置到顶部？

测试：

转到：http://jsfiddle.net/D2RLR/140/，向下滚动页面并单击任意按钮。您将被送回顶部，但根据文档，这不是默认行为。

HTML

<div class="list">
<div class="listheader">
  <a class="btn listname" href="#">Colors</a>
</div>
<ol class="things">
  <li><a href="#">White</a></li>
  <li><a href="#">Blue</a></li>
  <li><a href="#">Red</a></li>
  <li><a href="#">Green</a></li>
  <li><a href="#">Orange</a></li>
</ol>
</div>
<div class="list">
<div class="listheader">
  <a class="btn listname" href="#">Colors</a>
</div>
<ol class="things">
  <li><a href="#">White</a></li>
  <li><a href="#">Blue</a></li>
  <li><a href="#">Red</a></li>
  <li><a href="#">Green</a></li>
  <li><a href="#">Orange</a></li>
</ol>
</div>
<div class="list">
<div class="listheader">
  <a class="btn listname" href="#">Colors</a>
</div>
<ol class="things">
  <li><a href="#">White</a></li>
  <li><a href="#">Blue</a></li>
  <li><a href="#">Red</a></li>
  <li><a href="#">Green</a></li>
  <li><a href="#">Orange</a></li>
</ol>
</div>
<div class="list">
<div class="listheader">
  <a class="btn listname" href="#">Colors</a>
</div>
<ol class="things">
  <li><a href="#">White</a></li>
  <li><a href="#">Blue</a></li>
  <li><a href="#">Red</a></li>
  <li><a href="#">Green</a></li>
  <li><a href="#">Orange</a></li>
</ol>
</div>
<div class="list">
<div class="listheader">
  <a class="btn listname" href="#">Colors</a>
</div>
<ol class="things">
  <li><a href="#">White</a></li>
  <li><a href="#">Blue</a></li>
  <li><a href="#">Red</a></li>
  <li><a href="#">Green</a></li>
  <li><a href="#">Orange</a></li>
</ol>
</div>
<div class="list">
<div class="listheader">
  <a class="btn listname" href="#">Colors</a>
</div>
<ol class="things">
  <li><a href="#">White</a></li>
  <li><a href="#">Blue</a></li>
  <li><a href="#">Red</a></li>
  <li><a href="#">Green</a></li>
  <li><a href="#">Orange</a></li>
</ol>
</div>
<div class="list">
<div class="listheader">
  <a class="btn listname" href="#">Colors</a>
</div>
<ol class="things">
  <li><a href="#">White</a></li>
  <li><a href="#">Blue</a></li>
  <li><a href="#">Red</a></li>
  <li><a href="#">Green</a></li>
  <li><a href="#">Orange</a></li>
</ol>
</div>
<div class="list">
<div class="listheader">
  <a class="btn listname" href="#">Colors</a>
</div>
<ol class="things">
  <li><a href="#">White</a></li>
  <li><a href="#">Blue</a></li>
  <li><a href="#">Red</a></li>
  <li><a href="#">Green</a></li>
  <li><a href="#">Orange</a></li>
</ol>
</div>

/*$('.things').collapse("hide");*/

$(".listname:not(.disabled)").livequery('click', function(event) {
    $(this).parents('.list').find('.things').collapse("toggle");
    $("#listview, #thingview, #allview").removeClass('active');
});

（还包括实时查询）

【问题讨论】：

为了防止滚动添加 onclick="return false;"到您的链接
啊 - 这相当于下面的 Diodeus 解决方案，对吧？这个选项有什么更好的理由吗？我过去曾成功使用过 preventDefault()，所以我倾向于坚持使用它。

标签： jquery twitter-bootstrap collapse

【解决方案1】：

你需要添加：

event.preventDefault()

..给你的脚本取消点击当前href（一个井号）

【讨论】：