jQuery preventDefaultに従って：モバイル上のホバー状態

Question

状況をどのように処理するかを理解するのを手伝ってください。私たちにはリンクがあります。追加のリンクブロックを展開する、そのリンクのためのhover CSSルールがあります。

$('li').children('a').on('click', function(e) { 
 
\t 
 
    if ($(this).siblings('div').is(':hidden')) { 
 
    
 
    \t e.preventDefault(); 
 
    
 
    } 
 
    
 
});

ul { 
 
    list-style-type: none; 
 
    border: 1px solid black; 
 
    background-color: white; 
 
} 
 

 
a { 
 
    display: block; 
 
    height: 30px; 
 
    line-height: 30px; 
 
} 
 

 
li:hover div { 
 
    display: block; 
 
} 
 

 
li div { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li> 
 
    <a href="google.com">Google</a> 
 
    <div> 
 
     <a href="gmail.com">GMail</a> 
 
     <a href="maps.google.com">Maps</a> 
 
    </div> 
 
    </li> 
 
</ul>

アイデア：拡張され、追加のリンクまで、第1のリンクのためのpreventDefaultする必要があります。デスクトップ上では違いは分かりません（ホバーCSSルールを削除して最初のリンクをクリックしようとすると、残りのリンクが隠されているので機能しません）。正しい行動：ユーザーは最初のリンクを見て、他のリンクを見て、その後、最初のリンクをクリックすることができます。

ホバーとクリックが同じなので、モバイルで問題が発生します。ユーザーが最初のリンクをクリックすると、クリックの瞬間に追加のリンクが非表示になっていても、hrefが実行されます。しかし、：hoverルールはリンクをクリックするのと同時に適用されるので、JSはリンクが既に開かれているかのように扱い、デフォルトを防ぎません。実際のクリックより1秒前に、私の現在のIFステートメントがモバイル機器では偽であることを意味します。正しいアプローチを見つけるのを手伝ってください。

jquery-mobileを使用しないソリューションは、温かく歓迎されています！ありがとう！

Answer 1

可能な解決策は次のとおりです。常に実行preventDefault。そしてdivの可視性に基づいて、リンクを表示するか、hrefに進むかを決めます。

$('li').children('a').on('click', function(e) { 
 
\t 
 
    e.preventDefault(); 
 
    var $links = $(this).siblings('div'); 
 
    
 
    if ($links.is(':hidden')) { 
 
    $links.show(); 
 
    } else { 
 
    window.location.href = this.href; 
 
    } 
 
    
 
});

ul { 
 
    list-style-type: none; 
 
    border: 1px solid black; 
 
    background-color: white; 
 
} 
 

 
a { 
 
    display: block; 
 
    height: 30px; 
 
    line-height: 30px; 
 
} 
 

 
li:hover div { 
 
    display: block; 
 
} 
 

 
li div { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li> 
 
    <a href="google.com">Google</a> 
 
    <div> 
 
     <a href="gmail.com">GMail</a> 
 
     <a href="maps.google.com">Maps</a> 
 
    </div> 
 
    </li> 
 
</ul>

PS：それは私にはユーザーエクスペリエンスの問題である可能性が高いです。タッチデバイスでは、実際にはhoverイベントはありません。したがって、デスクトップと同じ体験を提供することは困難です。通常、モバイルデバイスには若干デザインが異なります。この場合は、ドロップダウンメニューがtapまたはtouchstartに切り替わります。