0

サブメニュー付きのメニューがあります。メニュー項目をクリックすると、サブメニューが表示されます。マウスがメニューから離れると、サブメニューは 1 秒後に非表示になります。私が欲しいのは、1秒前にマウスがメニューに戻ると、非表示機能が終了することです。

これが私がしたことです：

jsフィドル

HTML

<ul>
    <li><span>Item</span></li>
    <li><span>Item</span>
        <ul>
            <li><span>Item2</span></li>
            <li><span>Item2</span></li>
            <li><span>Item2</span></li>
            <li><span>Item2</span></li>
        </ul>
    </li>
    <li><span>Item</span></li>
    <li><span>Item</span>
        <ul>
            <li><span>Item3</span></li>
            <li><span>Item3</span></li>
            <li><span>Item3</span></li>
            <li><span>Item3</span></li>
        </ul>
    </li>
</ul>

CSS

body,htnl,ul{
    padding:0;
    margin:0;
}
ul {
    list-style:none;
    background:#ddd;
    overflow:hidden;
}
li{
    float:left;
    display:block;
    padding:3px 10px;
    margin:4px;
    background:#bbb;
}

ul ul{
    position:absolute;
    display:none;
    left:0;
}

jQuery

$("ul li").click(function(){
    $(this).find("ul").show();
}).parent().mouseleave(function(){
    setTimeout(function(){
        $("ul li").find("ul").hide();
    },1000);
}).parent().mouseenter(function(){
    $("ul li").stop(true,true);
});
4

3 に答える 3

1

変数にタイムアウトを割り当て、clearTimeout を使用します。

var timeout;

$("ul li").click(function(){
    $(this).find("ul").show();
}).parent().mouseleave(function(){
    timeout = setTimeout(function(){
        $("ul li").find("ul").hide();
    },1000);
}).parent().mouseenter(function(){
    clearTimeout(timeout);
    $("ul li").stop(true,true);
});
于 2013-11-12T09:06:03.933 に答える
1

後でキャンセルするために使用できるタイムアウトへの参照が必要です。

var timeout;
$("ul li").click(function(){
    $(this).find("ul").show();
}).parent().mouseout(function(){
    clearTimeout(timeout)
    timeout = setTimeout(function(){
        $("ul li").find("ul").hide();
    },1000);
}).mouseover(function(){
    clearTimeout(timeout)
});

編集: mouseenter/leave の代わりに mouseover/out を追加clearTimeoutし、mouseout にも追加しました (1000 ミリ秒以内に複数回クリックするのに役立ちます)。

フィドル: http://jsfiddle.net/MnL6m/

于 2013-11-12T09:06:37.183 に答える
0

これを書きます：

$("li ul").hide();

$("ul li").click(function(){
    $("li ul").hide();//added here
    $(this).find("ul").show();
}).parent().mouseleave(function(){......

ここでフィドル。

于 2013-11-12T09:07:32.157 に答える