JavaScript链接在Chrome中有效，但在Firefox中不起作用

Question

在我的Rails项目中，我有一个HTML文件

<a href='#' id="show_advanced">Show advanced options</a>

然后在JavaScript/JQuery中

  jQuery("#show_advanced").click(function() { // if link is clicked
      event.preventDefault(); // don't go to another page
      if (jQuery('.advanced_option').is(':hidden')) { // if it is hidden, slide down
        jQuery('.advanced_option').slideDown();
        jQuery("#show_advanced").html("Hide advanced options");
      } else { // if not, slide up
        jQuery('.advanced_option').slideUp();
        jQuery("#show_advanced").html("Show advanced options");
      }
  });

它显示表单的高级选项。在Chrome中，这很好用。但在FireFox中，链接只是将我带到页面.../#，这是不正确的。我怎么才能修复它？

Answer 1

我假设你没有阻止锚标签的默认行为。如果您在页面http://example.com/index.html上，并且有一个包含hash +文本的锚点，那么该链接将把用户带到包含id文本的元素。

<a href='#end'>Click Me!</a>
...
<div id='end'>content</div>

如果要阻止浏览器执行此标准行为，则需要使用事件的preventDefault函数。关键是将事件传递给回调函数：

jQuery("#show_advanced").click(function(event) {
  event.preventDefault();
  ...
}

回调声明中缺少事件参数！

Answer 2

您实际上不需要href='#‘。只需将其作为锚点。

<a id="show_advanced">Show advanced options</a>
<script> 
    $("#show_advanced").click(function () {
        console.log("clicked");
    });
</script>