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

Posted 2023-05-08

【中文标题】下拉菜单不会显示超过一秒钟..不工作。

【英文标题】：DropDown Menu won't show for more than a second..not working.

【发布时间】：2015-01-24 06:04:24

【问题描述】：

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

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

【参考方案1】：

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

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

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

【讨论】：

原来我以错误的方式导入 jquery 文件。感谢您的帮助。

【参考方案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="">***</a></li>
            </ul>
        </li>
    </ul>
</nav><!-- ends nav -->



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

);

【讨论】：

原来我以错误的方式导入 jquery 文件。感谢您的帮助。