1

ナビゲーションメニューがあります。デスクトップでも、iPad と iPhone でも問題なく動作します。Android デバイス (Chrome を使用) でのみ機能しません。サブメニューが開きますが、サブメニュー内のリンクを開こうとすると、サブメニューが閉じます。だからあなたはページに行きません。私はインターネットでたくさん検索して試しましたが、これまでのところ成功していません...単純化されたコードの下。うまくいけば、誰かが私を助けることができます。

<nav id="nav">

<ul>

  <li>Main 1</a>
    <ul>
      <li><a href="http://www.stackoverflow.com">Submenu 1</a></li>
      <li><a href="http://www.stackoverflow.com">Submenu 2</a></li>
     </ul>
  </li>

  <li>Main 2
    <ul>
      <li><a href="http://www.stackoverflow.com">Submenu 1</a></li>
      <li><a href="http://www.stackoverflow.com">Submenu 2</a></li>
      <li><a href="http://www.stackoverflow.com">Submenu 3</a></li>
    </ul>
  </li>

     <li>Main 3
    <ul>
      <li><a href="http://www.stackoverflow.com">Submenu 1</a></li>
      <li><a href="http://www.stackoverflow.com">Submenu 2</a></li>
      <li><a href="http://www.stackoverflow.com">Submenu 3</a></li>
    </ul>
  </li>
     </ul>
</nav>

nav ul li ul {
display: none; }
nav ul li:hover > ul {
display: block; }
4

1 に答える 1

0

Android が頭を悩ませています...何時間も検索して試した後、あきらめました。すべてのデバイスでホバー効果をうまく機能させることは不可能だと思います。次の解決策を選択しました。

  • 親をクリックすると、jQuery を使用してサブメニューが表示されます。親をもう一度クリックすると、対応するサブメニューが消えます。開くサブメニューは最大 1 つです。
  • JavaScript を無効にした訪問者のために、「従来の」CSS ホバー効果を使用します。

以下は私のコードです。jQueryを使うのはこれが初めてなので、より効率的またはより良い解決策があれば教えてください!

<nav>
    <ul>
      <li class="nietactief nonJSclass">Hoofdmenu 1
      <ul>
      <li><a href="http://www.stackoverflow.com">Submenu 1a</a></li>
      <li><a href="http://www.stackoverflow.com">Submenu 1b</a></li></ul></li>
      <li class="nietactief nonJSclass">Hoofdmenu 2
        <ul>
          <li><a href="http://www.stackoverflow.com">Submenu 2a</a></li>
          <li><a href="http://www.stackoverflow.com">Submenu 2b</a></li>
          <li><a href="http://www.stackoverflow.com">Submenu 2c</a></li>
        </ul>
      </li>
      <li class="nietactief nonJSclass">Hoofdmenu 3
        <ul>
          <li><a href="http://www.stackoverflow.com">Hoofdmenu 3a</a></li>
          <li><a href="http://www.stackoverflow.com">Hoofdmenu 3b</a></li>
          <li><a href="http://www.stackoverflow.com">Hoofdmenu 3c</a></li>
        </ul>
      </li>
    </ul>
  </nav>

nav ul li.nietactief ul {
    display: none;
}
nav ul li.actief > ul {
    display: block;
}
nav ul li.nonJSclass:hover > ul {
    display: block;
}

$( document ).ready(function() {

  $(".nonJSclass").each(function()
  {
    $(this).removeClass("nonJSclass");
  });

$('nav ul li').click(function() {

    var classActief = $(this).attr('class');

if (classActief == 'actief'){

    $(this).removeClass('actief').addClass('nietactief');
} 

if (classActief == 'nietactief'){

    $('nav ul li').removeClass('actief').addClass('nietactief');

}

if (classActief == 'nietactief'){

    $(this).removeClass('nietactief').addClass('actief');

}  


});



});



 </script>
于 2013-05-19T19:56:15.963 に答える