javascript - 为什么 show() 只工作一瞬间？

Question

我试图让列表项在点击时出现。当我使用 hide() 方法时，它们开始隐藏，但是当我添加 show() 方法时，它只工作大约一毫秒。不确定是不是因为它总是默认回到原来的设置？我基本上只想点击主列表 <a>在这种情况下，主列表并显示其他两个

$(function() {
  $('.sublist').hide();
  $(".mainlist").on('click', function() {
    $('.sublist').show();
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<ul>
  <li>
    <a href="" class="mainlist">Main List</a>
    <li>
      <a href="" class="sublist">Sublist One</a>
    </li>
    <li>
      <a href="" class="sublist">Sublist Two</a>
    </li>
  </li>
</ul>

Answer 1

当您单击链接时，整个页面会刷新。这意味着您的代码再次运行:

$('.sublist').hide();

你应该做的是防止这样的默认行为:

$(".mainlist").on('click', function(event) {
      $('.sublist').show();
      event.preventDefault();
    });