Jquery需要一个切换函数，但不确定如何切换

Question

正在尝试创建覆盖，以便在单击具有子菜单的菜单项时使用。因此，该子菜单将在其后面显示一个覆盖。

到目前为止，我有以下代码！：

//Add overlay to the body and fade it in.
$('.jrm-menu-categories').click(function() {
    $('#wrap_all').append('<div id="overlay-2"></div>');
    $('#overlay-2').fadeIn(300);
});

// remove overlay when overlay is clicked
$(function(){// document.ready shorthand
    $(document).on('click','#overlay-2',function() {
        $('#overlay-2').fadeOut('3000',function(){//use 3000 in place of 300m
            $('#overlay-2').hide();
        });    
    });
});

//close menu when overlay is clicked
$('#overlay-2').click(function(){
    uberMenu_close('#menu-item-1459');
    return false;
});

});

这对我来说非常有用，但是我也希望能够点击".jrm-menu-categories“并隐藏或删除覆盖。这个类是用于菜单项的，所以它已经完成了隐藏子菜单的工作，我想它应该是一个切换函数，但我不确定如何进行这项工作。尤其是自从第一次点击".jrm-menu-categories“将div插入到html中以来。

有人能帮帮我吗？

谢谢！

更新

因此，这是我到目前为止为了避免将div重新添加到html中而编写的代码。但也有一些问题。它从正常开始，菜单项是clicked..submenu，down..overlay被添加进来。然而，如果我点击覆盖，它会像它应该的那样关闭菜单，但是覆盖不会消失。如果我第二次重新打开子菜单，它的行为就应该是这样的。我可以点击overlay，它将删除覆盖并关闭子菜单。

$('.jrm-menu-categories').click(function () {
    var overlay = null; // handle for the overlay

// make sure the overlay doesn't already exist before you create and append
if($("#overlay-2").length === 0) {
    $('#wrap_all').append('<div id="overlay-2"></div>');
    $('#overlay-2').fadeIn(300);
    return;
}

overlay = $("#overlay-2");

if (overlay.is(":visible")) {
    overlay.click(function() {
        $('#overlay-2').remove();
    });
} // trigger a click to make it go away
}        
);


// remove overlay when overlay is clicked
// $(function(){// document.ready shorthand
    //   $(document).on('click','#overlay-2',function() {
        //     $('#overlay-2').fadeOut('3000',function(){//use 3000 in place of 300m
        //       $('#overlay-2').hide();
        //});    
    //});
// });


//open the menu when clicking on a special button
$('#overlay-2').click(function(){
    uberMenu_close('#menu-item-1459');
        return false;
});

});

Answer 1

你在淡出菜单，然后重新添加？如果用户多次单击菜单，这看起来效率很低；您将在页面上看到多个覆盖，不唯一的ids，臃肿等。您可以做一些事情来完成您需要的东西。您需要向jrm-menu-categories单击方法添加更多功能：

$('.jrm-menu-categories').click(function () {
    var overlay = null; // handle for the overlay

    // make sure the overlay doesn't already exist before you create and append
    if($("#overlay-2").length === 0) {
        $('#wrap_all').append('<div id="overlay-2"></div>');
        $('#overlay-2').on('click', function () {
            $(this).fadeOut(300);
        }).fadeIn(300);
        return;
    }

    overlay = $("#overlay-2");

    if (overlay.is(":visible")) {
        overlay.click(); // trigger a click to make it go away
    }       
    else {
        overlay.fadeIn(300);
    } 
});

这是一个Fiddle Demo

这是一个修改后的Fiddle Demo，用于处理文档单击。