1

ドロップダウンメニューを作成しました。このメニューは、親divをポイントすると開きます。ユーザーが親divまたはドロップダウンメニューの両方を離れるときに、このdivを非表示にしたい

$(function(){
$('.a').live('mouseenter',function(){
    $('#dropdown').stop(false, true).hide();

    var id = $(this).attr('id');
    $('#dropdown').css({
        position:'absolute',
        top: $(this).offset().top + $(this).height() + 'px',
        right: '115px',
        left: $(this).offset().left + 'px',
        zIndex:1000,
        width:'100px'
    });

    $('#dropdown').stop().slideDown(500);

    if($('#dropdown').mouseleave() && $('#'+id).mouseleave()){
        $('#dropdown').slideUp(500);
    }
 });
});

ライブ デモ

4

4 に答える 4

2

セレクターでコンマで区切ることにより、複数の要素にバインドできます

$('.a, .this, .that, div, form').live(....
于 2012-07-16T07:55:23.167 に答える
1

@Daleが提案したように複数のセレクターを使用するか、要素と使用の両方に同じクラスを使用します 

$(".commonClass").live(function(){

});

同じイベントをより多くの要素にバインドする場合commonClassは、新しいセレクターを追加する代わりに、それらに適用するだけです。

于 2012-07-16T07:58:10.537 に答える
1

このデモを試してください: http://jsfiddle.net/AQweU/ または http://jsfiddle.net/k986c/

いくつかのこと。

  • .onライブの代わりにイベントを使用します。
  • this.idの代わりに使用し$(this).attr('id')ます。
  • この状態if($('#dropdown').mouseleave() && $('#'+id).mouseleave()){についてはよくわかりませんが、私が行ったことの下のコードを参照してください

質問のデモにはJq 1.7.2があるため、.on使用することに注意してください。

残りのコードをチェックアウトします：（それが原因を助けることを願っています）:)

$(function(){
    $('.a,#dropdown').on('mouseenter',function(){
        $('#dropdown').stop(false, true).hide();

        var id = this.id;
        $('#dropdown').css({
            position:'absolute',
            top: $(this).offset().top + $(this).height() + 'px',
            right: '115px',
            left: $(this).offset().left + 'px',
            zIndex:1000,
            width:'100px'
        });

        $('#dropdown').stop().slideDown(500);

        $('#dropdown, #'+id).mouseleave(function(){   
            $('#dropdown').slideUp(500);

        });
    });
});
​
于 2012-07-16T07:58:17.127 に答える
1

mouseleave イベントを追加してドロップダウンをチェックする必要があります。短くするために、これを試してください

私はこれがあなたが望んでいたものであることを願っています

于 2012-07-16T08:58:27.693 に答える