Question

我有一个菜单，在翻转时显示一个div，它不是菜单的子项，当你滚动时它会再次隐藏该div。 div直接放在菜单项下方，模仿子菜单。

html看起来像这样 -

这是我的菜单 -

<div id="nav">
<ul>
    <li class='with_panel'>
      <span id='panel1' class='current'><img src='theImage' /></span>
    </li>
    <!-- more list items -->
</ul>
</div>

在一个不相关的div中，我有这个 -

<div id="panels">
     <div style="" id="panel1_panel" class="panel">
        <img src="myImage.png">
     </div>
<div>

我有一些jquery在翻转li -

时显示和隐藏相关面板

$("#nav .with_panel").mouseenter(function(){
    var id = $(this).find("span").attr("id");
    $(".panel").removeClass("open");
    $panel = $("#" + id + "_panel");
    $panel.addClass("open");
    $img = $(this).find("span img");
    $img.addClass("on");
    var hide = function(){
    if(!$panel.is(":hover")){
            $img.removeClass("on");
            $panel.removeClass("open");
        }
    }

    $panel.mouseleave(hide);
    $(this).mouseleave(hide);   
})

这似乎只适用于Chrome，而且我很确定这是因为ie＆amp; Firefox无法识别.is（“：hover”）。

我无法改变html结构，只能改变javascript。所以我正努力让它跨浏览器工作。有什么想法吗？

Answer 1

以下代码为您提供200毫秒超时（hide_to），以便在隐藏菜单之前离开菜单并进入面板。另一种方式也是如此。如果您使用menuitem或面板进行鼠标操作，则会取消隐藏超时，并在鼠标离开任何一个时重新启动。

$("#nav .with_panel").each(function() {
    var id = $(this).find("span").attr("id"),
        $panel = $("#" + id + "_panel"),
        $img = $(this).find("span img"),
        hide_to = null;

    var hide = function() {
            // start hide timeout
            hide_to = window.setTimeout(function () {
                $img.removeClass("on");
                $panel.removeClass("open");
            },200);
        };

    var show = function() {
            // clear hide timeout
            window.clearTimeout(hide_to);
            if (!$panel.is(".open"))
            {
                // open panel, only if it is not open already
                $(".panel").removeClass("open");
                $panel.addClass("open");
                $img.addClass("on");
            }
        };

    $(this).mouseenter(function() {
        show();
    }).mouseleave(function() {
        hide();
    });

    $panel.mouseenter(function() {
        show();
    }).mouseleave(function() {
        hide();
    });
});

Answer 2

尝试使用mouseover而不是mouseenter和mouseout而不是mouseleave。

例如：

$("#nav .with_panel").mouseover(function(){
    var id = $(this).find("span").attr("id");
    $(".panel").removeClass("open");
    $panel = $("#" + id + "_panel");
    $panel.addClass("open");
    $img = $(this).find("span img");
    $img.addClass("on");
        var hide = function(){
    if(!$panel.is(":hover")){
            $img.removeClass("on");
            $panel.removeClass("open");
        }
    }

    $panel.mouseout(hide);
    $(this).mouseout(hide);   
})

Answer 3

从jQuery 1.9.1开始，所有浏览器的.is（“：hover”）实际上已被破坏。游民。以下是使用jQuery 1.9.1对FF，IE10和Chrome（抱歉没有Opera）进行测试。 Opera用户，请评论这是否适用于Opera。

function isHovered(elt){
    var temp = $(elt).parent().find(":hover");
    return temp.length == 1 && temp[0] == elt;
}

然后替换

$panel.is(":hover")

通过

isHovered($panel[0])

否则，请保留所有代码。

小提琴：http://jsfiddle.net/mathheadinclouds/BxL4w/

is（：hover）替代ie＆amp;火狐

3 个答案: