jquery鼠标是否正确执行？

我有一个导航菜单，菜单“hotels”中有一个向下滑动的面板。 以下是脚本：

 $(document).ready(function(){

    $(".HotelPaneltrigger").mouseenter(function(){
        $(".panel").slideDown("slow");
        //$(this).toggleClass("active"); return false; 
    });

    $(".panel").mouseleave(function(){
        $(this).slideUp("slow");
    }); 
});

现在，我有两个问题： .HotelPaneltrigger触发面板（.panel）向下滑动 鼠标一离开.panel区域，面板就会向上滑动

第一个问题：在我的“HotelPaneltrigger”和“.panel”之间悬停会导致面板上下滑动多次，因为只要用户在两个元素之间悬停，就会执行这两个功能

第二个问题：面板定义为用户离开“.panel”区域后立即向上滑动

您推荐什么解决方案： 在“HotelPaneltrigger”上向下滑动面板，并在用户处于“HotelPaneltrigger”+“.panel”区域时保持打开状态。。在远离它们时关闭

我需要避免面板多次上下滑动，当用户离开触发链接时关闭面板。。。不是。面板区域

谢谢你的意见

我使用的菜单代码：

        <ul class="primary_nav">  

                <li class="active"><a href="link to.php" class="hoverBtn">Link 1</a></li>
                <li class="HotelPaneltrigger"><a href="#" class="hoverBtn">Hotels</a></li>
                <li><a href="#" class="hoverBtn">Link 3</a>
                    <ul class="subnav">  
                        <li><a href="link to.php">Link 4</a></li>
                        <li><a href="link to.php">Link 5</a></li>
                    </ul>           
                </li>
                <li><a href="#" class="hoverBtn">Link 6</a>
                    <ul class="subnav">  
                        <li><a href="link to.php">Sub 1</a></li>
                        <li><a href="link to.php">Sub 2</a></li>
                        <li><a href="link to.php">Sub 3</a></li>        
                    </ul>
                </li>               

                <li class="last"><a href="link to.php" class="hoverBtn">Specials</a></li>           
        </ul>

工作示例：

基本上，因为它是一个菜单，所以您将面板放在触发器内，并将两个事件处理程序都放在触发器上。因为面板是一个孩子，所以即使鼠标在面板上，您仍然可以在TIRGER上“输入”

$('.HotelPaneltrigger').hover(
    function () {
        // Show hidden content IF it is not already showing
        if($('.panel').css('display') == 'none') {
            $('.panel').slideDown('slow');
        }
    },
    function () {
        // Do nothing when mouse leaves HotelPaneltrigger
        $.noop();
    }
);

$('.panel').mouseleave(function () {
        $(this).delay('500').slideUp('slow');
});

---

如果不能完全正常工作，您也可以尝试使用hoverIntent插件-

是否可以为此创建一个JSFIDLE？我很难想象你所描述的问题。这正是我需要的。prodigitalson:-）但仍然很困惑，因为我有一个菜单脚本，其中嵌入了我的hotels链接。请参见上文，它尝试在我现有的导航菜单中的

下实现，但面板不会显示。将再次检查是否是css问题，很可能是。在这种情况下，您实际上希望触发器元素是

li

而不是

a

。如果你当时还没有弄明白，我会在有时间的时候尝试修改小提琴：-）我做了一个小提琴来测试我的跑步导航菜单，包括你的功能。函数冲突或。。是我：-）以下是示例：好吧，你不会相信问题是什么：我使用了你的class=“hotelPanelTrigger”，这与我的calss=“hotelPanelTrigger”不同。。。那是因为面板没有被触发。现在，您的解决方案就像一个符咒：-）…如何在面板关闭后延迟扩展功能，以避免再次出现多次上下效应？您的解决方案使它更接近，延迟有助于防止多次触发。。但只有当鼠标离开面板时，面板才会关闭。请尝试hoverIntent插件，添加该插件，然后将.hover函数更改为.hoverIntent