Question

我创建了一个下拉菜单。通过指向父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);
    }
 });
});

的 Live Demo

Answer 1

您可以通过在选择器

中用逗号分隔多个元素来绑定它们

$('.a, .this, .that, div, form').live(....

Answer 2

使用多个选择器作为@Dale建议或对两个元素使用相同的类并使用

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

});

如果您想将同一事件绑定到更多元素，您只需将commonClass应用于它们，而不是添加新的选择器。

Answer 3

试试此演示：http://jsfiddle.net/AQweU/ 或 http://jsfiddle.net/k986c/

很少;

使用.on事件代替实时。
使用this.id代替$(this).attr('id')。
不确定此情况if($('#dropdown').mouseleave() && $('#'+id).mouseleave()){请参阅下面的代码

请注意问题中的演示有Jq 1.7.2，因此.on使用。

休息检查代码:(希望它有助于casue）:)

$(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);

        });
    });
});

Answer 4

你必须添加mouseleave事件并检查下拉列表，保持简短，试试this

我希望这是你想要的

如何在两个html元素上绑定事件

4 个答案: