jquery - 关于 jQuery 和点击功能的问题

Question

我正在尝试使用 jQuery 和简单的 CSS 创建下拉菜单列表 Demo滑动工作正常，但我不知道为什么在单击功能时页面也会刷新(当您查看 时，这一点更为明显) 这是我的代码:

<style>
.musthidden{display:none;}
</style>

<ul>
    <li><a href="#">One</a></li>
    <li id="two"><a href="#">Two</a>
                  <ul class="musthidden">
                    <li><a href="#">Two _ 1</a></li>
                    <li><a href="#">Two _ 2</a></li>
                    <li><a href="#">Two _ 3</a></li>
                    <li><a href="#">Two _ 4</a></li>
                  </ul>
    </li>
    <li><a href="#">Three</a></li>
    <li><a href="#">Four</a></li>
</ul>

<script>
 $("#two").on("click",function(){
    $(".musthidden").slideToggle();
 });
</script>

你能告诉我为什么会这样吗？

Answer 1

点击功能应该是:

$("#two").on("click",function(e){
    e.preventDefault();
    $(".musthidden").slideToggle();
 });

e.preventDefault() 表示:不执行绑定(bind)到此事件的任何其他函数，在命中此函数后停止。所以它不应该在之后做任何事情。

e 是通过 click 事件发送的事件对象，大多数其他事件也有 e

查看更新 fiddle没有任何刷新。