0

興味深いjqueryの問題があります。基本的に、別の親にカーソルを合わせてサブメニューを表示すると非表示になり、サブメニューのある別の親にカーソルを合わせていないときに再表示するには、スティッキー サブメニューが必要です。これはすべて正常に機能します。問題は、スティッキー サブメニューの子 li にカーソルを合わせると、サブメニューが反転し、表示されているものと表示されていないものの間で点滅することです。私のjqueryが子liに継承されているようです? とにかくここにコードがあります：

CSS

.current-menu-parent ul{
  display:block;
  position:absolute;
}
#primary-nav ul li:hover ul {
  display:inline;
  position:absolute;
}
#primary-nav ul li > ul{
  display:none;
}

JavaScript

$(document).ready(function(){
  $(".current-menu-parent ul").show()
  $("#primary-nav > ul.menu li").mouseover(function(){
    $(".current-menu-parent ul").hide();
  });
  $("#primary-nav > ul.menu li").mouseout(function(){
    $(".current-menu-parent ul").show();
  });
});

HTML

<div id="primary-nav">
  <ul class="menu">
    <li>item</li>
    <li class="current-menu-parent">This is the current menu parent item
        <ul>
            <li>Current page</li>
            <li>page</li>
            <li>page</li>
        </ul>
     </li>
   <ul>
</div>
4

3 に答える 3

1

これは、セレクターの 2 番目の部分である が、に含まれるul.menu liALL に適用されるためです。の直接の子である をホバリングしたときにのみイベントが発生するようにするには、代わりにを使用することをお勧めします。liul.menuul.menu > liliul.menu

于 2012-07-10T20:52:36.960 に答える
0

アンドリューの答えを適用して、これを追加する必要があります：

$(".current-menu-parent ul").mouseover(function(e){

     e.stopPropagation();

});

完全なフィドルを参照してください jsfiddle.net/CBpHg/1/

アップデート：

これを少し説明すると、最下位レベルの li にカーソルを合わせると、hover イベントが hide 関数の親までバブルアップします。これがメニューが消える理由です。そのため、ul で stopPropagation を使用して、それ以上進行しないようにします。最下位レベルの li でも使用できます。

于 2012-07-10T21:07:30.310 に答える