0

次の JQuery コードを使用して、ドロップダウン メニュー ソリューションのマウス ホバー時にいくつかのスタイル要素を制御しています。

$(window).load(function () {

    // On hover show or hide
    $("#menu ul li").hover(function(){
             $(this).children("ul").show();
             $(this).children("ul").css('background-image', 'none');
       },
       function(){
             $(this).children("ul").hide();

    })

    // On hover show or hide
    $("#menu ul ul li, #menu ul ul li a ").hover(function(){
             $(this).css('color', '#666');
       },
       function(){
             $(this).css('color', '#FFF');       
    })

});

実際の例を参照してください:

http://www.youmeusdesign.co.uk/menu_test

ホバー機能をクリック機能に置き換えることができるように、これを変更したいと思います。クライアントがホバー機能をサポートしていないタッチ インターフェースを使用している場合。たとえば、Windows Phone。デバイスにはすでにホバーイベントを処理するクラスがいくつかあるため、iOS は問題なく動作します。

.hover を .click に置き換えてスクリプトを変更しようとしましたが、うまくいきませんか?

例えば

$("#menu ul li").click(function(){

どんな助けでも大歓迎です。

4

3 に答える 3

1

これを試してください: (ここでテスト: http://jsfiddle.net/d9mPC/ )

$("#menu ul li").on("mouseover mouseout tap",function(event){      
    if($(this).children("ul").is(":hidden") && (event.type == "mouseover" || event.type == "tap")){
         $(this).children("ul").show();
         $(this).children("ul").css('background-image', 'none');
   }else if($(this).children("ul").not(":hidden") && (event.type == "mouseout" || event.type == "tap")){
         $(this).children("ul").hide();
   }    
});

// On hover show or hide
$("#menu ul ul li, #menu ul ul li a ").on("mouseover mouseout tap",function(event){        
   if(!$.hasData($(this),"hovered") && (event.type=="mouseover" || event.type=="tap")){
         $(this).css('color', '#666');
         $.data((this),"hovered",true);
   }else if($.hasData((this),"hovered") && (event.type=="mouseout" || event.type=="tap")){
         $(this).css('color', '#FFF');
       $.removeData((this),"hovered");
   }
});
于 2013-03-24T20:02:25.447 に答える
0

ホバー機能をクリック機能に置き換えることができるように、これを変更したいと思います。

$("#menu").on('click', 'ul li', function(){
         $("#menu li ul").hide().find('li a').css('color', '#FFF');
         $("ul", this).show().children('li a').css('color', '#666');
});
于 2013-03-24T19:55:14.723 に答える
0

おそらく両方を同時に行うことができます。

私がすることは、クリックまたはホバーでアイテムを表示できるようにすることです（クリック状態を追跡して、ホバーが開いたときにすぐに閉じないようにします）。

次に、いくつかのことを達成します

  • デバイスをスニッフィングする必要はありません
  • メニュー項目をクリックして切り替える機能を人々に提供します

別の方法は、デバイスの種類をスニッフィングするか、デバイスごとに異なる JavaScript ファイルを条件付きでロードする (サーバー側でデバイスをスニッフィングする) ことであり、メンテナンスの頭痛の種になる可能性があります。

すべてのデバイスに両方を実装することをお勧めします。

于 2013-03-24T20:01:22.830 に答える