0

親のイベントにサブナビゲーション<ul>タグを表示しようとしています。問題は、要素が に設定されているため、のイベントが発生しないことです。<li>mouseoveradisplay:blocklihover

jQuery を使用して動作しますが、プレーンな JavaScript では動作しません。リスナーをヘッダー要素に適用し、.matchesSelectorメソッドを使用してイベントターゲットが一致するかどうかを判断しています.nav > li;

4

2 に答える 2

0

コードがなければ、推測する必要がありますが、ホバリングを判断するためにmouseoverとを使用していると思います。イベントがバブルmouseoutするので、の子孫要素から受け取ることになり、誤って (ここでも推測していますが) カーソルがの子孫要素の 1 つを離れたのではなく、 を離れたと考えます。同様に、カーソルがそれ自体から子孫要素に移動すると、 がトリガーされます。jQuery はandを使用しないため、jQueryで動作します (おそらく を使用しますか?)。mouseoutmouseoutlililililimouseouthovermouseovermouseoutmouseentermouseleave、このシナリオにより適しています。(そして、それらをネイティブに持っていないブラウザーでそれらをエミュレートします。元は IE のみでした。)

したがって、jQuery を使用している場合は、明らかにhover. そうでなく、ライブラリを使用していないか、エミュレートしないライブラリを使用している場合はmouseenter、操作がmouseleaveどの要素mouseoutから来ているかを確認し、liそれ自体でない限り無視する必要があります。

サブナビゲーションがそれを明らかにするものをulカバーしない場合は、CSS のみのソリューションを検討してください。liたとえば、構造は次のとおりです。

<ul class="mainnav"><!-- Main nav -->
  <li><!-- Nav item 1 -->
    Nav Text 1
    <ul><!-- Menu for nav item 1 -->
    ...
    </ul>
  </li>
  <li><!-- Nav item 2 -->
    Nav Text 2
    <ul><!-- Menu for nav item 2 -->
    ...
    </ul>
  </li>
</ul>

このCSSはそれを行います（配置のためにこれ以上が必要ですが、これは表示/非表示の部分を行います）：

ul.mainnav > li > ul {
  display: none;
}
ul.mainnav > li:hover > ul {
  display: none;
}

これは IE6 では機能しません。IE7 以降で動作します (標準モードの場合)。

于 2012-04-07T07:43:59.700 に答える
0

すべての子要素のイベント ハンドラーを定義してから、

event.cancelBubble = true; //IE
event.stopPropagation(); //FF, etc
于 2012-04-07T07:45:07.537 に答える