0

この質問は、サブメニューのあるリストメニューのタッチイベントに関するものです。目的は、ワンタッチ->延長、2回目のタッチリトラクトで（モバイルデバイス上で）アクションを実行することです。別のアイテムをタッチ->それは伸び、前は縮みます。

ここに問題があります：iPad4.3.3はうまく機能します。iPhone5.1およびAndroid4-2番目のタッチが収縮および伸長します。望ましい効果ではありません。ここでモバイルデバイスから例を確認してください。見てくれてありがとう。

これはjQueryまたはモバイルOSのバグですか？

$(document).ready(function () {   
    if((navigator.userAgent.match(/iPhone|iPod|iPad|Android/i))) {
        $('#nav li').click(function(){
            // attach a click event listener to provoke iPhone/iPod/iPad's hover event
            // Amended the next 3 lines 
            var $this_li = $(this);  
            $('#nav li ul').slideUp(function() {
                $('ul', $this_li).slideDown();
            });
        });
    } else {
        // This part works in non-mobile browser
        $('#nav li').hover(
            function () {
                //show its submenu
                $('ul', this).slideDown(200);
            }, 
            function () {
                //hide its submenu
                $('ul', this).slideUp(200);         
            }
        ); 
    }  
});
4

2 に答える 2

0 
 var $this_li = $(this);  
 $('#nav li ul').slideUp(function() {
     $('ul', $this_li).slideDown();
 });

このコードは想定どおりの動作をしており、$（this）にスライドダウンを指示していますが、同じアイテムを上にスライドしてキャプチャしているので、上から下にスライドします。

代わりに、これを試してください。ナビゲーションアイテムのコレクションをループして、クリックしたものを除くすべてを上にスライドし、クリックしたものだけを下にスライドします。

//...in the click event
var $this_li = $(this);  
$('#nav li').each(function(index) {
    if ( this != $this_li ) {
        $('ul', this).slideUp();
    }
    else {
        $('ul', $this_li).slideDown();
    }   
});

私はjqueryの専門家ではありませんが、それはかなり近いはずです。

于 2012-08-08T19:15:23.163 に答える
0

数時間の試行錯誤の後、次の変更により、タッチデバイスのホバーイベントをミラーリングするための望ましい効果が最終的に得られました。つまり、サブメニューがある（IDを使用し、クラス属性を使用しない）メニュー項目の場合：

  1. サブメニューが表示されている（非表示になっている）場合は、slideDown。
  2. サブメニューが下（表示）の場合は、スライドアップします。

  3. 1つのサブメニューが下にあり、別のサブメニューが選択されている場合は、下を非表示にして、選択したものを下にスライドします。

    $('#nav li').click(function() {
    var $selected_li = $(this); 
    if ($('ul', $selected_li).is(':visible')) {
        $('#nav li ul').slideUp();
    }
    else {
        $('#nav li ul').slideUp(function() {
            $('ul', $selected_li).slideDown();
        });
    }
});
于 2012-08-10T23:13:34.010 に答える