单击时滑动面板跳回主页

Posted 2023-02-25

【中文标题】单击时滑动面板跳回主页

【英文标题】：Sliding panel jumping back to home when clicked

【发布时间】：2011-07-08 07:47:55

【问题描述】：

我在一个 1page 网站上做了一个垂直滑动面板（点击右上角的 psssst）。 总而言之，它工作正常，可以正常上下滑动（滑动时按钮上仍有一点凸起，但没有太大）。

问题是当您向右滚动然后单击滑动面板时，它会跳回页面的开头。

我该如何解决/防止这种情况？ 你可以在这里查看问题：http://www.basenharald.nl/3d

提前致谢！

【参考方案1】：

看来你有两个问题：

第一个问题（我想你已经解决了）

锚点上的点击事件将您发送到“/#”网址。发生这种情况是因为锚元素的 href 为“#”，并且浏览器的 默认 行为是将您发送到该 URL。

为了防止这种情况发生，你应该在你的点击事件处理程序中使用e.preventDefault()，或者return false如果你想停止所有的事件传播（因为这就是 jQuery 的工作原理）。

第二个问题

似乎即使在阻止默认行为之后，单击“#open”或“#close”仍会使 Scroller 回到初始状态。在萤火虫中，我可以看到导致这种情况发生的那些元素上的 click 事件有一个处理程序。您可以通过在 firebug 中运行它自己来查看：

console.log($('#close')[0].onclick.toString())

你会看到这个：

function () 
  Scroller.end(this);
  l = this.hash.substr(1);
  a = document.getElementsByTagName("a");
  for (i = 0; i < a.length; i++) 
    if (a[i].name == l) 
      clearInterval(Scroller.interval);
      Scroller.interval = setInterval("Scroller.scroll(" + Scroller.offsetParent(a[i]) + ")", 10);
    
  

您似乎在代码中的某处为所有锚点分配了一个事件处理程序，并且该行

Scroller.interval = setInterval("Scroller.scroll(" + Scroller.offsetParent(a[i]) + ")", 10); 

是什么导致您的滚动条“重置”、“返回”或其他什么。

也许问题是有条件的？也许if (a[i].name == l) 总是评估为 true 并最终将事件处理程序分配给 all 锚点，即使这不是它的意图。

我对你的应用和/或你正在使用的任何插件了解不够，所以我只能告诉你问题出在哪里，并且在这个函数中。

希望这会有所帮助。

【讨论】：

感谢亚历山大的帮助！解决方案比我想的要简单得多。 javascript 处理点击功能，因此我的 不需要具有 href="#"。一旦删除，问题就解决了。由于您花了这么多时间来写上面的全部内容，我会将您的答案标记为已接受的答案:)

【参考方案2】：

尝试将return false; 添加到您的点击处理程序：

// Expand Panel
$("#open").click(function()
    $("div#panel").slideDown("slow");
    return false;
); 

// Collapse Panel
$("#close").click(function()
    $("div#panel").slideUp("slow");
    return false;
); 

【讨论】：

使用e.preventDefault()（并在函数签名中声明e参数，即$("#close").click(function(e))...而不是return false;。在jQuery中，return false;将阻止默认行为并停止所有冒泡（可能会破坏您可能已附加或将来会附加的其他偶数处理程序），因此最好专门调用e.preventDefault()。

@Alexander 它工作了，但不知何故它不再工作了。多一点帮助将不胜感激。

@Luuk 我已经添加了答案，因为评论太长了