0

通常のul/liリスト配置のリンクを含む非常に単純なjQueryドロップダウンメニューがあります。ドロップダウンのコードは次のとおりです。

$('body').ready(function() {
      if(screen.width <= 720) {
          $('.dropdown').hover(function() { $(this).find('.subMenu').toggle(); });
          $('.dropdown').click(function() { if( $('this').css('display') != 'none') {
              $('this').toggle();
              }
          });
      }
      else
      {
          $('.dropdown').hover(
              function() { $(this).stop(true,true).find('.subMenu').slideDown("fast"); },
              function() { $(this).stop(true,true).find('.subMenu').hide(); } 
          );
      }
  });

モバイルデバイス（720幅は無視してください。今のところテスト用です）では、次の機能を実現したいと思います。

  • ユーザーがドロップダウンメニューでリンクをタップ>メニューが開いている場合は閉じます

  • 別のメニューがすでに開いているときにユーザーがリンクをタップ>前のメニューを閉じ、現在のメニューを開く

  • ユーザーがページの別の場所をタップ>開いているメニューをすべて閉じる

ホバー関数が実際に＃2と＃3を処理していることがわかりましたが、＃1を機能させる方法がわかりません。私はこの特定の試みがなぜあるのかを知っているとかなり確信しています

$('.dropdown').click(function() { if( $('this').css('display') != 'none') {
      $('this').toggle();
      }
});

失敗します。クリック（またはこの場合はタップ）がホバーイベントをトリガーすると推測しています。ホバーイベントは優先されているように見えるため、メニューを非表示にするのではなく表示します。

これをモバイルデバイスで機能させるにはどうすればよいですか？

編集：私はjQueryv1.7.2を使用しています

HTMLリストの構造は次のとおりです。誰かに役立つ場合（要約版）：

    <div id="navbar">
      <ul>
        <li class="dropdown"><a href="#">Link A</a></li>
        <li class="dropdown"><a href="#">Link B</a>
          <ul class="subMenu">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
          </ul>
        </li>
      </ul>
    </div>
4

4 に答える 4

1

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-05-30T08:11:54.860 に答える
1

if（$（'this'）。css（'display'）！='none'）はif（$（'this'）。is（'：hidden'））に置き換えることができます

.siblings（）を使用して他のメニューを閉じることができます...セレクターがどのように表示されるかを正確に示すHTMLコードを表示できません。

オプションとして、他に開いているメニューがあるかどうかを確認するためにいくつかのクラスを追加できます...

  $('.dropdown').hover(function() { 
      $('.openedMenu .subMenu').hide().removeClass('openedMenu');
      $(this).find('.subMenu').toggle(); 
      $(this).addClass('openedMenu');
  });
  $('.dropdown').click(function() { 
      if( $('this').is(':hidden')) {
          $('this').toggle();
      }
  });
于 2012-05-30T07:30:48.127 に答える
1

私は1つのモバイルWebプロジェクトでしか作業していませんが、クリックイベントにも問題がありました。私はjQueryモバイルフレームワークを使用していました。回避策は、クリックの代わりにjQmに含まれる「tap」イベントを使用することでした。jQuery mobileを使用していないと思うので、「tap」イベントの作成に役立つこのプラグインを見つけました：http：//aanandprasad.com/articles/jquery-tappable/

于 2012-05-30T07:45:10.353 に答える
0

次のコードは、私の特定の問題を解決しました。

$('html').mousedown(function() {
    $('.subMenu').hide();
    });

$('#navbar').mousedown(function(event) {
    event.stopPropagation();
    });

$('.dropdown').mousedown(function() {
    var ele = $(this).find('.subMenu');
    $('#navbar').find('.subMenu').each(function(index) { if(!$(this).is(ele)) $(this).hide(); } );
    ele.toggle();
    });

私が従った基本的な考え方は、要素がユーザーがクリックしたメニューでない限り、mousedownイベントを受信したときにサブメニューを見つけて非表示にすることでした。次に、トグルはメニューを表示または非表示にします。イベント伝播部分とbody/html非表示部分はacrashikの回答からのものであり、への変更$('html')はこの回答からのものです。

于 2012-05-30T08:43:49.463 に答える