DropDown菜单不会显示超过一秒钟......无效。 [英] DropDown Menu won't show for more than a second..not working.

问题描述

尝试使用相应的子菜单创建自己的响应式移动下拉菜单。

到目前为止我有基本布局。
用户应该可以在显示这些子菜单之间切换。
当点击WORK时，不应该打开其他子菜单。我继续前进并添加了display：none;用于隐藏子菜单的属性。
尝试使用jQuery在单击它们时显示（）和隐藏（）它们。
我环顾四周并测试各种方法。到目前为止一切都没有
代码如下


HTML

Trying to make my own responsive mobile drop-down menu with its corresponding sub-menus.
So far I have the basic layout.
The user should be able to toggle between showing those sub-menus.
When "WORK" is clicked no other sub-menu should be open.
I've gone ahead and added the "display: none;" property to hide the sub-menus.
Trying to use jQuery to show() and hide() them when they are clicked.
I've looked around and test various methods. So far none worked. The code is as follows

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 - 提供链接，以便您可以测试它。

http://codepen.io/anon/pen/vEOJQQ - provided the link so you can test it out.

尝试的方法

如何隐藏未点击的ul并在Jquery中显示子菜单？

如何修复此JQuery下拉菜单？

主要观点

其中一些修正工作但他们只显示子菜单一秒钟。

我的代码有问题吗？

MAIN POINT
Some of these fixes do WORK but they only show the sub-menu for a second.
Is there something wrong with my code?

推荐答案

我相信你正在寻找preventDefault 。为你的JS尝试这样的事情：

I believe you're looking for "preventDefault". Try something like this for your JS:

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

编辑：这是关于jQuery API网站上的preventDefault（）的文章： http://api.jquery.com/event.preventdefault/

Here's the article about preventDefault() on the jQuery API site: http://api.jquery.com/event.preventdefault/

这篇关于DropDown菜单不会显示超过一秒钟......无效。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！