<ol>上的Bootstrap崩溃总是导致滚动到顶部</ol>

时间:2012-11-01 21:13:33

标签: jquery twitter-bootstrap collapse

有人可以建议为什么引导崩溃会导致滚动条在崩溃被触发时重置到顶部吗?

测试:

转到: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>

JS

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

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

(Livequery也包括在内)

1 个答案:

答案 0 :(得分:2)

您需要添加:

event.preventDefault()

..到你的脚本取消点击当前的href(一个哈希标记)