Выпадающее меню остается открытым на сенсорных устройствах

У меня есть выпадающее меню, и оно отлично работает, кроме как на сенсорных устройствах. На iPad, когда вы касаетесь одного из пунктов меню, раскрывающийся список появляется как обычно, но остается там, даже если вы коснетесь другого места на экране. Как сделать так, чтобы меню исчезало, если коснуться другого места на экране? Вот jsfiddle:

http://jsfiddle.net/Jkfbm/

вот мой jquery:

    $(document).ready(function(){
$('ul.nav_menu > li').hover(function() {
    $(this).children(".sub_menu")
        .stop(true, true)
        .animate({
            height:"toggle",
            opacity:"toggle"
        },600, 'easeInOutQuad')
        });
    });

ipad touch jquery jquery-hover
person hyphen    schedule 10.03.2013    source источник
comment
Не уверен, что наведение — лучший метод для сенсорных экранов. Вместо этого попробуйте сосредоточиться. Потому что таким образом, когда функция «не в фокусе» должна быть ложной. Вы видели функцию наведения на jQuery? У вас есть две функции параметров. hover(function(){//in hover},function(){//out of hover});. Таким образом, вы могли бы обратить анимацию таким образом?   -  person bashleigh    schedule 10.03.2013
comment
фокус не работает. Извините, я новичок в javascript, поэтому мне могут понадобиться примеры кода, чтобы действительно понять, что вы предлагаете.   -  person hyphen    schedule 10.03.2013
comment
Я пытаюсь использовать modernizr, чтобы предложить альтернативу сенсорным событиям, но я не понимаю, как это осуществить.   -  person hyphen    schedule 10.03.2013
comment
Правильно, не используйте наведение на сенсорных экранах. Вы должны использовать касание как для открытия, так и для закрытия навигации.   -  person JuanT    schedule 11.03.2013

Ответы (2)


arrow_upward
0
arrow_downward

Что-то вроде этого. Я думаю, что это ваш переключатель, но опять же, я могу ошибаться, поскольку вы сказали, что он работает на других устройствах и в других браузерах.

$('li','.nav_menu'.hover(function(){
    $(this).animate({height:'100%','opacity':'1'},600);//plus I've noticed a syntax error on this line.
//unexpected bracket after 'easeInOutQuad'
},function(){
    $(this).animate({height:'0%','opacity':'0'},600);//putting back the animation.
});

Могу ошибаться, но попробуйте посмотреть, что получится.

person bashleigh    schedule 10.03.2013
comment
это не сработало. Навигационное меню больше не отображалось при наведении в обычном браузере. - person hyphen; 11.03.2013

arrow_upward
0
arrow_downward

я в настоящее время пробую это ... лучшее предложение кто-нибудь?

$(document).ready(function () {
    $('ul.nav_menu > li').hover(

    function () {
        $(this).children(".sub_menu")
            .stop(true, true)
            .animate({
            height: "toggle",
            opacity: "toggle"
        }, 600, 'easeInOutQuad');
    });
    $('html').click(function() {
        $(".sub_menu").hide();
    });
});
person hyphen    schedule 10.03.2013