1

私のメイン ナビゲーションには、一連のサブメニューがあります。私の問題は、通常のブラウザー サイズではメニューをホバーで開く必要があり、モバイル ビューではクリックで開く必要があることです。機能するjQueryがありますが、モバイルでのホバーと通常のビューでのクリックをオフにすることはできません

HTML

  <ul class="mainMenu">
     <li>
       ITEM
       <ul class="subMenu">
          <li></li>
       </ul>
      </li>
    </ul>

jQuery (コードは機能しますが、モバイル/通常のビューではオフにできません)

$(document).ready(function () {
  $('.mainMenu li').hover(function () {
    $(this).find('.subMenu').stop().fadeIn();
  }, function () {
    $(this).find('.subMenu').stop().fadeOut();
  });

  $('.mainMenu li').click(function () {
    $(this).find('.subMenu').stop().slideToggle();
  });
});

** また試してみました ** (ブラウザのサイズをターゲットにして、コードが機能しなくなりました)

var $browserWidth = window.innerWidth || document.documentElement.clientWidth;
    if ($browserWidth > 768) {
      $('.mainMenu li').hover(function () {
    $(this).find('.subMenu').stop().fadeIn();
  }, function () {
    $(this).find('.subMenu').stop().fadeOut();
  });
    } else if($browserWidth < 768) {
      $('.mainMenu li').click(function () {
    $(this).find('.subMenu').stop().slideToggle();
  });
   }
4

2 に答える 2

3

このリンクをチェックしてください。

JavaScript でメディア クエリを使用する方法について詳しく説明します。

基本的に、css メディア クエリを渡すとプロパティがブール値を返すmatchMedia()関数があります。matches

だからあなたの場合：

if(window.matchMedia("(min-width: 768px)").matches){
  //your desktop code
}
else{
  //your mobile code.
}
于 2013-11-05T18:44:25.083 に答える
1

@Ed Hinchcliffeは私を正しい軌道に乗せました...これが最終的に機能した答えです

$(document).ready(function () {
    menuStuff();
});

$(window).resize(function () {
    menuStuff();
});

function menuStuff() {
    var $browserWidth = window.innerWidth || document.documentElement.clientWidth;
    if ($browserWidth > 768) {
        $('.mainMenu > li').unbind().bind({
            mouseenter: function (e) {
                $(this).find('.subMenu').stop().fadeIn();
            },
            mouseleave: function (e) {
                $(this).find('.subMenu').stop().fadeOut();
            }
        })
    } else {
        $('.mainMenu > li').unbind().click(function () {
            $(this).find('.subMenu').stop().slideToggle();
        });
    }
}
于 2013-11-05T19:52:54.983 に答える