jQuery子菜单不会消失，除非它被悬停一次

jQuery Submenu not disappearing unless it is hovered once

本文关键字：悬停 一次 菜单 消失 jQuery      更新时间：2023-09-26

html代码:

<div class="main-nav main-nav-default">
<div class="container">
    <div class="main-nav-logo">
        <a class="logo-color" href="index.html">Centaur <span class="brand">Research</span></a>
    </div>
    <div class="main-nav-links">
        <ul id="responsive">
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li class="dropdown"><a href="services.html">Services</a>
                <ul class="dropdown-lists">
                    <li><a href="research_sector.html">Research Sector</a></li>
                    <li><a href="http://online.c-research.in/">Online Research</a></li>
                    <li><a href="http://travel.c-research.in/">Travel Research</a></li>
                </ul>
            </li>
            <li class="dropdown"><a href="http://panel.c-research.in">Panel</a>
                <ul class="dropdown-lists">
                    <li><a href="http://focusgroup.c-research.in/">Discussion Group</a></li>
                </ul>
            </li>
            <li><a href="contact.html">Contact</a></li>
            <li class="dropdown"><a href="#">Language</a>
                <ul class="dropdown-lists">
                    <li><div class="translate"><div id="google_translate_element"></div></div> <script type="text/javascript">
                        function googleTranslateElementInit() {
                            new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, gaTrack: true, gaId: 'UA-38654447-1'}, 'google_translate_element');
                        }
                    </script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script></li>
                </ul>
            </li>
            </li>
        </ul>
    </div>
</div>

这是jQuery: 

$(".dropdown-lists").hide();
    $(".dropdown").mouseenter(function(){
        $(this).find(".dropdown-lists").slideDown();
        $(".dropdown-lists").mouseleave(function(){
        $(this).slideUp();
        });
    });

基本上的事情是，下拉工作完美，当我悬停在它，但它不会消失，除非我悬停在子菜单的.dropdown-lists类。如果我将鼠标悬停在.dropdown类上并在没有将鼠标悬停在子菜单上的情况下导航，则子菜单不会消失。它保持静止，除非我至少把它悬停一次。

我知道我的jQuery只允许滑动菜单时，它是悬停一次，我想知道一个代码组合，将工作，即使我不悬停在子菜单。

另外这里是下拉CSS代码，我怀疑子菜单是不是父元素main-nav-link或#responsive:

的子元素

.main-nav-links { padding: 20px 0px 20px 0px; } #responsive { text-align: right; } #responsive li { position: relative; text-align: right; display: inline-block; } #responsive li > a { font-family: "Open Sans"; font-weight: 700; padding-right: 10px; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; color: #fff; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } @media (max-width: 992px){ #responsive li > a { font-size: 12px; } } #responsive li > a:hover { color: #19B5FE; } .dropdown-lists { text-align: center; } #responsive li .dropdown-lists li { list-style: none; margin-left: -29px!important; border-top: 1px solid rgba(60,60,60,0.9); padding: 10px 0px 10px 0px; } #responsive li .dropdown-lists li > a { color: rgba(204,204,204,0.8); font-size: 12px; font-weight: 400; } #responsive li .dropdown-lists li > a:hover{ color: #fff; } #responsive li .dropdown-lists { width: 200px; position: absolute; top: 200%; background: rgba(51, 51, 51, 0.8); }

像这样更新你的jquery 

$(".dropdown-lists").hide();
$(".dropdown").mouseenter(function(){
    $(this).find(".dropdown-lists").slideDown();
    }).mouseleave(function(){
    $(this).find(".dropdown-lists").slideUp();
});

编辑:

由于您在下拉CSS中使用了top属性，在您最新的小提琴中的下拉菜单中出现了额外的问题。在你的CSS中更新下面的类。

#responsive li .dropdown-lists {
width: 200px;
position: absolute;
top: 100%; /* It was 200% earlier */
background: rgba(51, 51, 51, 0.8);
}
.dropdown
{
 height:40px;
}
<<p> 更新演示/strong>
相关文章：