javascript - jQuery Submenu不会消失，除非将其悬停一次

这是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仅允许将菜单悬停一次后将其向上滑动，我想知道即使我不将鼠标悬停在子菜单上也可以使用的代码组合。

另外，这里是Dropdown CSS代码，我怀疑子菜单是否不是父main-nav-link或#response的子元素：

.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();
});

DEMO

编辑：

由于您在下拉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;
}

Updated DEMO

关于javascript - jQuery Submenu不会消失，除非将其悬停一次，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24646041/