Скрытие подменю с задержкой в JQuery

Question

Скрытие подменю с задержкой в JQuery

0

У меня есть меню с подменю. когда вы нажимаете на пункт меню, будет отображаться подменю. когда мышь покидает меню, подменю будет скрыто через 1 сек. то, что я хочу, это то, что если мышь вернется в меню до 1 с, функция скрытия закончится.

вот что я сделал:

jsFiddle

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);
});

Mohsen Safari 12 нояб. 2013, в 10:11

Источник

Теги:

javascript

jquery

html

css

menu

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);
});

fisk 12 нояб. 2013, в 07:13

0

Напишите это:

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

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

Заклинай здесь.

Hiral 12 нояб. 2013, в 07:49

Ещё вопросы

Pranav Gupta · Accepted Answer · 2013-11-12T07-48-00.000Z

Вам нужно иметь ссылку на тайм-аут, который позже можно использовать для отмены:

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)
});

EDIT: mouseover/out вместо mouseenter/leave, а также добавил clearTimeout в mouseout (помогает с несколькими нажатиями в течение 1000 мс)

скрипка: http://jsfiddle.net/MnL6m/

Да, попробуйте удалить parent () непосредственно перед указанием мыши
Я добавил скрипку, которая работает
LOL, JQuery есть нативный метод для этой цели $.delay()
а как вы отменили? страница, на которую вы ссылаетесь, говорит, что ее нельзя отменить.