jQuery: боковое выпадающее меню?

Question

Я работаю с боковой панелью, и мне хотелось, чтобы при наведении курсора на боковую панель два параметра выдвигались (с .slide).Это то, что у меня есть до сих пор:

       $("#userFActivator").hover(
            function () {
                $("#userF").show("slide", { direction: "left" }, 400);
            },
            function () {
                setTimeout(next(), 400);
                function next() {
                    if ($("#userF").is(":hover") === true) {
                        $("#userF").show();
                    } else {
                        $('#userF').hide('slide', { direction: 'left' }, 400);
                    }
                }
            }
        );

Все, что мне дает, - это по-настоящему глючная боковая панель, когда я наводю курсор мыши на варианты, которые они исчезают.Есть ли решение, которое позволяет мне, когда я наведите курсор мыши на параметры, оставить их, чтобы пользователь мог щелкнуть их, прежде чем они исчезнут?Спасибо!

Answer 1

В вашем коде есть несколько проблем.

setTimeout(next(), 400); - В этом коде next() будет выполнено сразу, а не через 400 мс, потому что вы вызываете функцию вместо передачи ее ссылки.

Далее вы можете использовать анонимную функцию вместо определения ее каждый раз.

Попробуйте это.

   $("#userFActivator").hover(
        function () {
            $("#userF").show("slide", { direction: "left" }, 400);
        },
        function () {
            setTimeout(function() {
                if ($("#userF").is(":hover") === true) {
                    $("#userF").show();
                } else {
                    $('#userF').hide('slide', { direction: 'left' }, 400);
                }
            }, 400);
        }
    );

Answer 2

Решением было бы поместить ваши родительские элементы меню в контейнер и сделать то же самое с дочерними элементами меню:

<ul>
    <li>
        <span class='label'>Menu item 1</span>
        <ul class='submenu'>
            <!-- etc. -->
        </ul>
    </li>
    <li>
        <span class='label'>Menu item 2</span>
        <ul class='submenu'>
            <!-- etc. -->
        </ul>
    </li>
</ul>

Затем в вашем javascript установите селектор ': hover' на <li/>в то время как slide -е ребенок <ul class='submenu'/> -с.