1

ここに問題があります。スーパーフィッシュCSSアプローチを使用して、ドロップダウンメニュー付きのメニューを作成しました。メインメニューは順序付けられていないリストで、それぞれ<li>に子<a>とが含まれています<ul>

<ul class="sfmenu">
  <li>
    <a href="#">MENU 1</a>
    <ul>
      <li><a href="#"><div>Stuff here</div></a></li>
      <li><a href="#"><div>Stuff here</div></a></li>
      <li><a href="#"><div>Stuff here</div></a></li>
   </ul>
  </li>
  <li>
    <a href="#">MENU 2</a>
    <ul>
      <li><a href="#"><div>Stuff here</div></a></li>
      <li><a href="#"><div>Stuff here</div></a></li>
    </ul>
  </li>
</ul>

<li>トップレベルのCSS<a>は次のとおりです。

.sf-menu li {
  color: #f9dfa0; 
  cursor: pointer; 
  display: inline-block; 
  float: left; 
  height: 45px; 
  margin: 0
  padding: 0;
  padding: 20px 10px 0 10px;
}

.sf-menu a 
{
  font-weight: normal; 
  text-decoration: none;
  text-align: center;
  height: 45px;
  width: 100%;
}

この位置付け(パディング)により、ドロップダウン<li>にカーソルを合わせるとダブルホバー効果<li>が表示され、ドロップダウンにカーソルを合わせると<a>再びドロップダウンします。動作するサブメニューをスライドダウンするためのjqueryコードがいくつかありますが、ホバーするとダブルドロップダウンが表示されます。私のjqueryコードは次のとおりです。

$(function() {
  $('.sf-menu li').mouseover(function(){
    $(this).children('ul').hide().slideDown('normal');
  });
});

<a>タグからホバーイベントを削除する方法はありますか?

どんなアイデアでも大歓迎です。

4

1 に答える 1

0

テストケースは次のとおりです。

<ul class="sf-menu">
<li><span>unmatched</span></li>
<li><span>unmatched</span>
            <ul>
    <li><span>unmatched</span></li>
    <li><span>unmatched</span></li>
    </ul>
</li>
<li><span>unmatched</span></li>
</ul>

<button onclick=' $(".sf-menu>li:not(li ul li)>span").text("matched");'></button>

ボタンをクリックしてください:

<ul class="sf-menu">
<li><span>matched</span></li>
<li><span>matched</span>
            <ul>
    <li><span>unmatched</span></li>
    <li><span>unmatched</span></li>
    </ul>
</li>
<li><span>matched</span></li>
</ul>

理解するのは大変でした。コードは次のようになります。

$(function() {
  $('.sf-menu>li:not(li ul li)').mouseover(function(){
    $(this).children('ul').hide().slideDown('normal');
  });
});

更新: これにより、子要素にマウスオーバーすると、イベントのバブリングがキャンセルされます。

$('.sf-menu>li>ul>li>a').mouseover(function(event){
   event.stopPropagation();
});
于 2012-05-17T00:20:25.123 に答える