0

メニューの特定の機能をデバイスに無視させたいと考えています。メニューは垂直で、ページをナビゲートするときにサブメニューが開いたままのアコーディオン型です。

デバイスで表示すると、メニューはページの上部に表示され、小さくなります。私がする必要があるのは、アイテムがクリックされたときにメニューが再び閉じて、メニューがコンテンツを覆わないようにすることです。開いたままにしておくスクリプトを次に示します。この行を無視する場合 (デバイス) を探していると思います...

<script type="text/javascript">

$(function () {
 $("ul.menu-main > li").hover(function () {
    //Don't do this again if the same menu is hovered.
    if (!$(this).hasClass('selected')) {
        //Ensure any open sub-menu is closed.
        $("li.selected").children("ul").stop(true, true).slideUp(1000);
        $("li.selected").removeClass('selected');
        //Open sub-menu
        $(this).addClass('selected');
        $(this).children("ul").slideDown(1000);

    }
 });
        //Keep sub-menu open when navigating pages.
    if($('.active.parent > ul').length > 0) {
        $('.active.parent > ul').show();
    }
 });
 </script>

デバイスが使用されている場合、これを無視する必要があります。

if($('.active.parent > ul').length > 0) {
        $('.active.parent > ul').show();

それが理にかなっていることを願っていますか?!

4

2 に答える 2

1

レスポンシブ サイトを構築しているように思えます。matchMedia()と if-else ステートメントを使用して、さまざまなメディアクエリに対してさまざまな関数を実行できます。

github リポジトリの例を次に示します。

if (matchMedia('only screen and (max-width: 480px)').matches) {
  // smartphone/iphone... maybe run some small-screen related dom scripting?
}

良い代替手段は、さまざまな幅のコールバックを定義できるminwidth.jsです。

minwidth(600, function() {
  doSomethingLikeLoadFacebook();
});

またはプレーンjQuery...

$(document).ready(function() {
  $(window).resize(function() {
    if ($('.active.parent > ul').length > 0) {
      if ($(window).width() > 960) {
        $('.active.parent > ul').show();
      } else {
        $('.active.parent > ul').hide();
      }
    }
  });
  $(window).trigger('resize');
});
于 2012-10-10T11:43:46.890 に答える
0

デバイスの幅を確認してから、それに依存するメニューを表示できます

if ($(window).width() > 960) {  // if device is wider than 960px
  if($('.active.parent > ul').length > 0) { // show menu
          $('.active.parent > ul').show();
  }
}
于 2012-10-10T11:40:31.423 に答える