javascript - 为什么show()仅能瞬间使用？

我试图让列表项在单击时出现。当我使用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>

最佳答案

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

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

您应该做的是防止出现以下默认行为：

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

关于javascript - 为什么show()仅能瞬间使用？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52648872/