javascript - DropDown Menu 不会显示超过一秒钟..不工作。

Question

尝试制作我自己的响应式移动下拉菜单及其相应的子菜单。
到目前为止，我已经有了基本的布局。
用户应该能够在显示这些子菜单之间切换。
单击“工作”时，不应打开其他子菜单。< br/>我已经继续并添加了“显示:无；”隐藏子菜单的属性。
尝试使用 jQuery 在单击时显示()和隐藏()它们。
我环顾四周并测试了各种方法。到目前为止没有工作。代码如下

HTML

<nav id="nav">
    <ul class="topLinksUL">
        <li class="topLinksLI"><a class="topLinksA" title="Home" id="home" href="">HOME</a>
            <ul class="abtDropUL">
                <li class="abtDropLI"><a class="dropLinksA" href=""></a></li>
            </ul>                           
        </li>
        <li class="topLinksLI"><a class="topLinksA" title="Work" id="wrk" href="">WORK</a> 
            <ul class="workDropUL">
                <li class="workDropLI"><a class="dropLinksA" href="">Projects</a></li>
                <li class="workDropLI"><a class="dropLinksA" href="">Education</a></li>
            </ul>
        </li>
        <li class="topLinksLI"><a class="topLinksA" title="About Me" id="abt" href="">ABOUT ME</a> 
            <ul class="abtDropUL">
                <li class="abtDropLI"><a class="dropLinksA" href="">Bio</a></li>
                <li class="abtDropLI"><a class="dropLinksA" href="">Interests</a></li>
            </ul>
        </li>
        <li class="topLinksLI"><a class="topLinksA" title="Contact Me" id="contact" href="">CONTACT&nbsp;ME</a>
            <ul class="contactDropUL">
                <li class="contactDropLI"><a class="dropLinksA" href="">Email</a></li>
            </ul>
        </li>
    </ul>
</nav><!-- ends nav -->

CSS

nav{
    width: 100%;
    text-align: center;
    margin: 0 auto;
}

/* Centering the LIST ITEMS within the UL List ITems*/
nav ul li ul.workDropUL, nav ul li ul.abtDropUL, nav ul li ul.contactDropUL{
    padding-left: 0;
    display: none;

}
ul{
    margin: 0.2em 0;
}

body{
    font-family: 'PT Sans Narrow', sans-serif; 
}

jQuery

$('#wrk').click(function() {
    $(".workDropUL").show();

});

http://codepen.io/anon/pen/vEOJQQ - 提供了链接，以便您可以对其进行测试。

尝试过的方法
How do I hide the ul's that are not clicked and show submenu in Jquery?

How to fix this JQuery dropdown menu?

要点
其中一些修复有效，但它们只显示子菜单一秒钟。
我的代码有问题吗？

Answer 1

我相信您正在寻找“preventDefault”。为你的 JS 尝试这样的事情:

$('#wrk').click(function(evt) {
    evt.preventDefault();
    $(".workDropUL").show();
});

编辑:这是 jQuery API 站点上关于 preventDefault() 的文章:http://api.jquery.com/event.preventdefault/