下拉菜单不会显示超过一秒钟..不工作。

Question

尝试制作我自己的响应式移动下拉菜单及其相应的子菜单。
到目前为止，我已经有了基本布局。
用户应该能够在显示这些子菜单之间切换。
当单击“工作”时，不应打开其他子菜单。
我'已经继续并添加了“显示：无；”属性来隐藏子菜单。
尝试使用 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/

Answer 2

默认情况下，当您点击 锚标记 时，它会寻找导航，如果 herf="" 它需要重新加载页面。所以您可以处理 herf="#"(demo) 或使用 span 标签 (demo)

<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"><span class="topLinksA" title="Work" id="wrk" href="">WORK</span> 
            <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>
                <li class="contactDropLI"><a class="dropLinksA" href="">Facebook</a></li>
                <li class="contactDropLI"><a class="dropLinksA" href="">Instagram</a></li>
                <li class="contactDropLI"><a class="dropLinksA" href="">Linked&nbsp;In</a></li>
                <li class="contactDropLI"><a class="dropLinksA" href="">StackOverflow</a></li>
            </ul>
        </li>
    </ul>
</nav><!-- ends nav -->



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

});