2

私は、コンピューターのブラウザーで、ホバー (効果の CSS3/jQuery) に表示されるドロップダウン メニューを備えたナビゲーションを持っており、ホバーすると消えます。ただし、ユーザーが iPad/iPhone を使用しているかどうかも検出し、使用している場合は、ユーザーがメニュー項目をクリックしたときにのみドロップダウンを表示します。たとえば、「サービス」ナビゲーション メニューがあり、コンピューターではサービスのサブメニューがホバー時に表示され、モバイルではクリック時に表示されるとします。

モバイルでは、ユーザーがページ上の別のメニュー項目/リンクをクリックしない限り、メニューは閉じません。私が望むのは、ユーザーがページの他の場所をクリックしたとき、またはページを下にスクロールしたときにメニューが消えることです。(もっと良い方法があれば教えてください)

ええ、これが私の実際のコードです（モバイル用）

$("#generale > li").click(function(){
    $('ul:first',this).css("display", "block");

    // Hover that needs to be changed 
    $("#generale > li").hover(function(){}, 
    function(){
        $('ul:first',this).fadeOut(200);
    }); 

});

基本的にはホバーをチェックアウトしますが、モバイルにはホバーがないため、より良い解決策が必要です。

助けてくれてありがとう！

4

2 に答える 2

2

jq 1.7+ を使用している場合は、こちらのデモをお試しくださいhttp://jsfiddle.net/SCN5T/3/

$(function(){
    $(document).mousedown(function(){
         $('.dropdown .active').removeClass('active').children('ul').hide();
    })
    $('.dropdown').on('mousedown','.subMenu', function(e){
        e.stopPropagation();
        var elem = $(this);
        if(elem.is('.active')) {
            elem.children('ul').slideUp(150);
            elem.removeClass('active');
        } else {
             $('.dropdown .active').removeClass('active').children('ul').hide();
            elem.addClass('active').children('ul').slideDown(150);
        }
    });
    $('.subMenu').on('mousedown','ul', function(e){
        e.stopPropagation();
        alert('menu item clicked');
    });       
})
于 2012-06-08T13:38:40.197 に答える
0

これを行うには、 jquery のon()関数を使用できます。

例えば

$('body').on('click', ':not(#generale > li)', function(){
    // close it here
});
于 2012-06-08T13:22:39.423 に答える