关于jQuery和Click Function的问题

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()说：不要执行绑定到此事件的任何其他功能，请在点击此功能后停止。所以它不应该做任何事情。

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

查看更新的fiddle，无需任何刷新。

Answer 2

您应该使用prevent.default（）函数。像这样：

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