2

こんにちは友人私はここで見ることができるように次のコードを試しましたhttp://jsfiddle.net/QCdz4/ドロップダウンメニューが表示されclick()たり消えたりするようにコーディングしたいのですmouseout()が、うまくいきません 助けてください よろしくお願いします

Jクエリ

<script>
    $(document).ready(function(){
        $('.click ul').css({display:'none', position:'absolute'});
        $('.click').click(function() {
            $(this).children('ul').slideDown(200);
            $(this).on('mouseout', function() {
                $(this).children('ul').slideUp(200);
            })
        })
    })
</script>

HTML

<div class="click">
    click
    <ul>
        <li><a href="#">one</a></li>
        <li><a href="#">two</a></li>
        <li><a href="#">three</a></li>
        <li><a href="#">four</a></li>
    </ul>
</div>
4

4 に答える 4

2

親要素から子要素にホバーするとmouseoutもトリガーされるため、mouseoutの代わりにmouseleaveが必要です。親の上に配置された子要素（読み取り：z-index）。この場合、カーソルを親要素から子要素に移動すると、mouseoutイベントはトリガーされますが、mouseleaveイベントはトリガーされません。mouseleave要素は、カーソルを親とその子から離したときにのみトリガーされます。

$(document).ready(function(){

   $('.click ul').css({display:'none', position:'absolute'});


   $('.click').on('click', function(){
       $("ul", $(this)).slideDown(200);
   }).on('mouseleave', function(){
       $("ul", $(this)).slideUp(200);
   });   


})

更新：非常に明確なライブデモを含む非常に優れた記事がここにあります：jqueryのmouseoutとmouseleaveの違い。（子要素のある正方形を確認してください。右下の正方形）

于 2012-04-17T08:33:53.000 に答える
1

これを使って

$(document).ready(function(){
    $('.click ul').css({display:'none', position:'absolute'});
$('.click').click(function(){

     $(this).children('ul').slideDown(200);
})

$('.click ul').hover(
  function () {
    // do nothing
  }, 
  function () {
    $('.click ul').slideUp(200);
  }
);
});
于 2012-04-17T09:16:59.267 に答える
0

関数を間違った方法でチェーンしています。

$('.click').click(function(){
     $(this).children('ul').slideDown(200);
}).on('mouseout', function(){
    $(this).children('ul').slideUp(200);
});

上記のコードを改良すると、

$('.click').on('click', function(){
     $("ul", $(this)).slideDown(200);
}).on('mouseout', function(){
    $("ul", $(this)).slideUp(200);
});

アップデート

カーソルが要素の外側にあるときにイベントがトリガーされるようにするには、マウスアウトの代わりに mouseleave を使用する必要があります

$('.click').on('click', function(){
     $("ul", $(this)).slideDown(200);
}).on('mouseleave', function(e){
        $("ul", $(this)).slideUp(200);
});

デモ

于 2012-04-17T08:31:57.160 に答える
0

mouseout イベントのバインディングを click イベントのバインディングの外に移動する

$(document).ready(function(){

$('.click ul').css({display:'none', position:'absolute'});

$('.click').click(関数(){

 $(this).children('ul').slideDown(200);

}) $('.click').on('mouseout', function(){

$(this).children('ul').slideUp(200); }))

}) </p>

于 2012-04-17T08:35:13.253 に答える