jquery - iPad での典型的な CSS メニューのドロップダウン ホバーの問題

Question

iPad のホバー状態と CSS メニューに共通の問題があります。ホバー状態を認識しないため、選択できません。

jQuery を使用して :hover をレプリケートする動的ホバー クラスを作成するなどの一般的な回避策のほとんどを試しましたがonClick="return true"、コードを少しきれいにするために削除しました。明らかなはずの何かが欠けていると確信しています。

これについて正しい方向に私を向ける助けがあれば大歓迎です。

リンク: iar.suismesser.com

Answer 1

メニューについて話していると思いますよね？この場合、CSS:hoverセレクターに別の行を追加します。#navアイデアはこれで、クリックすると、クラスが「」などに追加されますbtn1。これには、リスト項目にクラスを追加する必要もあります。
CSS

#nav li:hover > ul,
#nav.btn1 li.btn1 > ul {
    display: block;
}

HTML

<ul class="clearfix btn1" id="nav">
  <li class="btn1"><a href="http://iar.suissamesser.com/about-us/campus">ABOUT US</a><br />
    <ul>
      <li><a href="http://iar.suissamesser.com/about-us/campus">Campus</a></li>
      <li><a href="http://iar.suissamesser.com/about-us/history-mission">History &amp; Mission</a></li>
    </ul>
  </li>
  <li class="btn2"><a href="http://iar.suissamesser.com/parents/accreditation-and-licenses" >PARENTS</a><br />
    <ul>
      <li><a href="http://iar.suissamesser.com/parents/accreditation-and-licenses">Accreditation and Licenses</a></li>

JS

$("#nav > li > a").on("click", toggleNav);
var toggleNav = function(evt){
  var clicked = $(this).parent().attr('class');
  $("#nav").removeClass("btn1 btn2 btn3 btn4 ...").addClass(clicked);
  evt.preventDefault();
}

Answer 2

ここの例を見てください http://www.hnldesign.nl/work/code/mouseover-hover-on-touch-devices-using-jquery/

そこからはかなりまっすぐです。幸運を、

Answer 3

遅レス遅レスですが。

実際に jquery やコードを使用する必要はありません。css で ipad ロジックを混乱させるかオーバーライドするだけで済みます。

CSSでこれを試してください

.navigation li ul
{
display:none;
}
.navigation li:hover ul
{
display:block;  
}
.navigation > li:hover
{
background-color:#000;  
}

私が理解しているように、これはipadがliにカスケードするのを止め、liにホバーしたためa hrefを押しますが、サブメニューが開いていると、liにはすでにホバー状態があるため、aが次のレスポンダーになりますアクティブ。

これは偶然発見されました。

htmlはこのようになります

<ul class="navigation">
<li><a href="http://www.google.com">test link</a>
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
<li><a href="#www.google.com">test link</a>
<li><a href="#www.google.com">test link</a>
</ul>