8

下面显示一个菜单：

<a href="#" id="cityclick">ONZE WAARDEN</a>

<div id="citydrop">
    <div class="dropbottom">
        <div class="dropmid">
            <ul>
                <li><a href="#">FAQ</a>
                </li>
                <li><a href="#">ITC</a>
                </li>
                <li><a href="#">CLUB</a>
                </li>
                <li><a href="#">CULTUUR</a>
                </li>
                <li><a href="#">ROBITICA</a>
                </li>
            </ul>
        </div>
    </div>
</div>

jQuery for 如下：

$("#citydrop").hide();

$("#cityclick").mouseover(function () {
    $("#citydrop").slideDown('slow');
});

$("#citydrop").mouseleave(function () {
    $("#citydrop").slideUp('slow');
});

问题： 当鼠标离开“cityclick”但尚未进入“citydrop”时，我无法弄清楚如何切换子菜单“citydrop”。

我在这里尝试了jsfiddle

4

4 回答 4

8

在您的 html 上使用一些包装器，然后mouseleave在其上调用事件，例如：http: //jsfiddle.net/9yEHV/11/

$("#wrapper").mouseleave(function () {
    $("#citydrop").slideUp('slow');
});

和包装：

<div id="wrapper">
    <a href="#" id="cityclick" >ONZE WAARDEN</a>
    <!-- rest of your code -->
</div>
于 2013-05-13T10:12:33.017 回答
2

这是你想要做的吗？

HTML

<ul>
<li class="main-menu">
  ONZE WAARDEN
  <ul class="sub-menu" style="display: none;">
    <li><a href="#">FAQ</a></li>
    <li><a href="#">ITC</a></li>
    <li><a href="#">CLUB</a></li>
    <li><a href="#">CULTUUR</a></li>
    <li><a href="#">ROBITICA</a></li>
  </ul>
</li>
</ul>

Javascript

$('.main-menu').mouseenter(function(){
  $(this).find('.sub-menu').slideDown();
});

$('.main-menu').mouseleave(function(){
  $(this).find('.sub-menu').slideUp();
});
于 2013-05-13T10:08:02.953 回答
0

悬停插件包括 mouseenter 和 mouseleave 以下代码对我来说很好用

javascript:

$(document).ready(function(){

    $('.dropdown').hover(
    function(){

        $(this).children('.dropdown-menu.pricing-drop').slideDown('fast');
    },
    function () {
        $(this).children('.dropdown-menu.pricing-drop').slideUp('fast');
    });
});
于 2014-12-30T10:51:36.480 回答
0 
  $(document).ready(function () {
                $('#Dropdown').mouseover(function () {
                    $(this).slideDown();
                });
            });
 $(document).ready(function () {
                $('#Dropdown').mouseleave(function () {
                    $(this).slideup();
                });
            });

我认为这可能会有所帮助..

于 2015-06-18T10:09:00.907 回答