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

Question

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

$(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>

标签： javascriptjquery

Answer 1

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

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

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

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