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 回答