jquery mouseenter 正确执行？答案

【问题标题】：jquery mouseenter proper implrmentation?jquery mouseenter 正确执行？
【发布时间】：2011-07-01 08:07:07
【问题描述】：

我有一个导航菜单，在菜单“酒店”中，实现了一个向下滑动面板。这是脚本：

 $(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”区域时保持打开状态......并在远离他们时关闭？

我需要避免面板的多次上下滑动，同时在用户离开触发链接时关闭它...而不是 .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>

【问题讨论】：

是否可以为此创建一个 jsfiddle？正如你所描述的那样，我很难想象这个问题。

标签： jquery mouseover

【解决方案1】：

工作示例：http://jsfiddle.net/xmtpu/

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

【讨论】：

这正是我需要的 prodigitalson :-) 但我仍然感到困惑，因为我有一个菜单脚本，其中嵌入了我的酒店链接。见上文
它尝试在我现有的导航菜单中实现，位于
Hotels >

很可能是这样。在这种情况下，您实际上希望触发元素是li 而不是a。如果到那时你还没有弄清楚的话，我会在有时间的时候尝试修改小提琴:-)

我做了一个小提琴来测试我正在运行的导航菜单，包括你的功能。函数冲突或.. 是我 :-) 这是示例：jsfiddle.net/pivi/PJjCy/15

好吧，您不会相信问题出在哪里：我使用了您的 class="hotelPanelTrigger"，这与我的 calss="HotelPaneltrigger" 不同...导致该面板未触发。现在您的解决方案就像一个魅力:-) ..我如何在面板关闭后延迟扩展功能，以避免再次出现多次向上/向下影响？

【解决方案2】：

你可以试试这个；

$('.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 插件 - http://cherne.net/brian/resources/jquery.hoverIntent.html

【讨论】：

你的解决方案让它更近了一点，延迟有助于防止多次触发..但只有当鼠标离开面板时面板仍然关闭。
试试 hoverIntent 插件，添加它，然后将 .hover 函数更改为 .hoverIntent