0

hmtl コード: 

  <div id="nav">
 <ul>
 <li><a href="#">test 1</a></li>
 <li><a href="#">test 2</a>
  <div class="sub-nav">
  <p> <a href="#">link </a>  <a href="#">link </a> <a href="#">link </a>  </p>
  </div>

  </li>
 <li><a href="#">test 3</a>
  <div class="sub-nav">
  <p> <a href="#">link2 </a>  <a href="#">link3</a> <a href="#">link4 </a>  </p>
  </div>

</li>
 <li><a href="#">test 4</a></li>
 </ul>
  </div>

やりたいのは、マウスをliの上に置くと、対応する部分のコンテンツ（sub-nav）が表示されます。マウスがliから離れると、対応する部分が非表示になります。

.sub-menu css is display:none;

以下は私のコードですが、動作しません。

$(function(){

    $("#nav ul li").mouseenter(function() {
       $(this).find(".sub-menu").show();
    });
});
4

4 に答える 4

1

.sub-menuCSS と JavaScript にクラスがあるが、マークアップにあることを確認してください.sub-nav。

実用的なソリューションは次のとおりです。

$("#nav ul li").hover(function() {
    $(this).find(".sub-nav").show();
}, function() {
    $(this).find(".sub-nav").hide();
});​

デモ: http://jsfiddle.net/e8GYJ/

于 2012-05-11T10:06:25.860 に答える
1 
$("#nav ul li").mouseenter(function() {
       $(this).find(".sub-menu").show();
    }.mouseleave(function(){
      $(this).find(".sub-menu").hide();
    });

このコードをチェックしてください...

これがあなたに役立つことを願っています

于 2012-05-11T10:07:30.773 に答える
0

hover()イベント コールバックを試してください: http://api.jquery.com/hover/

于 2012-05-11T10:05:07.327 に答える
0

ユーザーホバー機能を試してください：

$("li").hover(
  function () {
     $(this).find(".sub-menu").show();
  }, 
  function () {
     $(this).find(".sub-menu").hide();
  }
);
于 2012-05-11T10:07:58.187 に答える