jqueryのロールアウト(slidedown)のプログラムを作っていますが、マウスオーバーした際に リストにマウスオーバーすると何回も slidedown が実行されてしまいます。これを回避するにはどうしたらよいでしょうか?


<script type="text/javascript" src="jquery_2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//alert("test");

$("#menu li").mouseover(function(){
//alert("test");

$(".box1",this).slideDown(200);
});

$(".box1 li").hover(function(){
$(".box1 p").css({
"display":"none"
});
$("p",this).css({
"display":"block"
});

});

$("ul#menu").mouseout(function(){
$(".box1").css({
"display":"none"
});

});
});
</script>
</head>

<body>
<ul id="menu">
<li class="navi_dai"><div class="wrap"><a href="#">navi1</a>
<div class="box1">
<ul>
<li id="navi1_1"><a href="#">navi1_1</a><p>ここが説明部分です1</p></li>
<li id="navi1_2"><a href="#">navi1_2</a><p>ここが説明部分です2</p></li>
<li id="navi1_3"><a href="#">navi1_3</a><p>ここが説明部分です3</p></li>
<li id="navi1_4"><a href="#">navi1_4</a><p>ここが説明部分です4</p></li>
</ul>
</div>
</div>
</li>
<li><a href="#">navi2</a></li>
<li><a href="#">navi3</a></li>
<li><a href="#">navi4</a></li>
<li class="clear"></li>
</ul>
</body>
</html>

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2014/02/26 10:26:10
  • 終了:2014/03/05 10:30:04

回答(3件)

id:windofjuly No.1

うぃんど回答回数2625ベストアンサー獲得回数11492014/02/26 17:50:26

ポイント167pt
$("#menu li").mouseover(function(){
//alert("test");

    $(".box1:not(:animated)",this).slideDown(200);
});
id:u_7cc No.2

7cc回答回数32ベストアンサー獲得回数142014/02/26 18:06:42

ポイント167pt

こういうことがしたいのでしょうか

$(document).ready(function() {

  $("#menu li").mouseenter(function() {
    $(".box1", this).slideDown(200);
  })

  $(".box1 li").hover(function() {
    $(".box1 p").css({
      "display": "none"
    });
    $("p", this).css({
      "display": "block"
    });
  });

  $("#menu .wrap").mouseleave(function() {
    $(".box1").css({
      "display": "none"
    });
  });

});

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

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません