Question

我的代码的问题是我正在创建一个on click函数，它基本上会导致关闭我最近点击的菜单对象。如何正确关闭其他菜单项？

$("#menu-item-1").click(function() 
{
    var elem = $("#menu-content-1");
    var parent = $(this);

    if (elem.css("display") == "none")
    {
        parent.css("font-weight", "bold");

        elem.slideDown();
        elem.css("left", theLeft);
        elem.css("top", p.top + 50);
    }
    else
    {
        elem.slideUp(function() { img.hide(); });
    }


    $("#menu-item-2").click(function() { $("#menu-content-2").slideUp(function() { 
        $("#hiddenImg1").hide(); 
        $("#menu-item-2").css("font-weight", "normal"); }); });
    $("#menu-item-3").click(function() { $("#menu-content-3").slideUp(function() { 
        $("#hiddenImg1").hide(); 
        $("#menu-item-3").css("font-weight", "normal"); }); });
    $("#menu-item-4").click(function() { $("#menu-content-4").slideUp(function() { 
        $("#hiddenImg1").hide(); 
        $("#menu-item-4").css("font-weight", "normal"); }); });
    $("#menu-item-5").click(function() { $("#menu-content-5").slideUp(function() { 
        $("#hiddenImg1").hide(); 
        $("#menu-item-5").css("font-weight", "normal"); }); });
});

Answer 1

所以我实际上做的是为每个检查鼠标所在位置的按钮添加一个处理程序。然后，如果鼠标单击不在可点击容器上，则容器将折叠。完美！

$("#menu-item-5").click(function() 
{
    var elem = $("#menu-content-5");
    var parent = $("#menu-item-5");
    var o = parent.offset();

    if (elem.css("display") == "none")
    {
        elem.slideDown();
        elem.css("left", (p.left + parent.width()) - elem.width() - 4);
        elem.css("top", p.top + 50);
    }
    else
    {
        elem.slideUp(function() { img.hide(); parent.css("font-weight", "normal"); });
    }

    $(window).click(function(e)
    {
        var hstart = o.left;
        var hend = o.left + parent.width();
        var vstart = o.top;
        var vend = o.top + parent.height();

        if(((e.clientX >= hstart) && (e.clientX <= hend)) && ((e.clientY >= vstart) && (e.clientY <= vend)))
        {
            //elem.slideUp(function() { img.hide(); parent.css("font-weight", "normal"); });
        }
        else
        {
            elem.slideUp(function() { img.hide(); parent.css("font-weight", "normal"); }); 
        }
    });
});

如何在单击其他菜单项时更改并隐藏我的菜单？

1 个答案: