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。但是有一些问题。它开始正常，菜单项被点击..子菜单下来..覆盖被添加。然而，如果我点击覆盖它关闭菜单，它应该但覆盖不会消失。如果我第二次重新打开子菜单，它的行为应该如此。我可以点击叠加层，它将删除叠加层并关闭子菜单。

$('.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

你正在淡出菜单，然后重新添加它？如果用户多次点击菜单，这似乎效率很低;你最终会在页面上出现多个叠加层，非唯一ID，膨胀等等。你可以做几件事来完成你需要的东西。您需要为jrm-menu-categories click方法添加更多功能：

$('.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。

Jquery需要切换功能但不确定如何

更新

1 个答案: