jquery - 单击按钮时不刷新（下拉菜单）

Question

谢谢 Ganesh “onclick ="return false;" 有效：D

所以我用本教程制作了一个 onclick 下拉菜单：clickable dropdown menu。问题是当我单击按钮打开下拉菜单时，网站会刷新。我该如何改变呢？

这是HTML：

<div id="menuebutton">
  <ul class="no-js">
    <li>
      <a href="" class="clicker"><img src="files/KH-Homepage/menue_button.png" alt="Icon"></a>
      <ul>
        <li><a href="#">Dashboard</a></li>
        <li><a href="#">Settings</a></li>
        <li><a href="#">Privacy</a></li>
        <li><a href="#">Help</a></li>
        <li><a href="#">Sign out</a></li>
      </ul>
    </li>
  </ul>
</div>

这是jQuery：

$(function () {
  $('#menuebutton > ul').toggleClass('no-js js');
  $('#menuebutton .js ul').hide();
  $('#menuebutton .js').click(function(e) {
    $('#menuebutton .js ul').slideToggle(200);
    $('.clicker').toggleClass('active');
    e.stopPropagation();
  });
  $(document).click(function() {
    if ($('#menuebutton .js ul').is(':visible')) {
      $('#menuebutton .js ul', this).slideUp();
      $('.clicker').removeClass('active');
    }
  });
});

我用 chrome、firefox 和我的 android 浏览器试了一下

Answer 1

您可以使用e.preventDefault()来防止锚的默认操作：

$('.click-nav .js').click(function(e) {
    e.preventDefault();
    // Rest of your code here
});