Question

如果单击此站点的下拉列表：http://ryanbent.com/ - 我希望每个选项卡一次只打开一个。如果单击一个，则关闭另一个。

我理解它背后的想法，当你点击它时我发了一个课，我试图通过他们每个人，但我似乎无法让它工作。我认为这是我的选择者。我的代码如下：

function HideMenu(){
    //$('.open').stop().animate({'top':'-480px'},500,"linear");
    $('.open').slideUp();
    $(this).removeClass("open");
    $("#fuzz").fadeOut();
}
function checkMenu(){ $('.open').slideUp(); }
    $('#contact').toggle(function() {
    checkMenu();
    $('#contact-pull').show().animate({'top':'-50px'}).addClass("open");
    //$('#contact-pull').slideDown();
}, function() {
    HideMenu();
    $('#contact-pull').animate({'top':'-180px'})
});     
$('#about').toggle(function() {
    checkMenu();         
    $('#about-pull').show().animate({'top':'55px'}).addClass("open");                
    // $('#about-pull').slideDown();
}, function() {
    HideMenu();
    $('#about-pull').animate({'top':'-465px'})
});     
$('#portfolio').toggle(function(){
    checkMenu();
    $('#portfolio-pull').animate({'top':'75px'}).addClass("open");
}, function() {
    HideMenu();
    $('#portfolio-pull').animate({'top':'-150px'});
});

有没有人对如何使这项工作有任何建议？我一直在努力解决这个问题，似乎无法让它发挥作用。我设置好标志，但我需要检查它。

Answer 1

您可以采用更简洁的方法，您不必单独初始化每个菜单项，只需编辑现有代码，您可以尝试这样的方法：

    function HideMenu(){
            $('.open').stop().animate({'top':'-180px'},500,"linear",function(){
                    $(this).removeClass("open");
                    $(this).hide();
            });
    }

    $('#contact').toggle(function() {
            $('#contact-pull').show().animate({'top':'-50px'}).addClass("open");
    }, function() {
            HideMenu();
            $('#contact-pull').animate({'top':'-180px'})
            $("#fuzz").fadeOut();
    });     
    $('#about').toggle(function() {
            var h = $('#about-pull').height();
            var new_t = h-380;
            $('#about-pull').show().animate({'top':new_t}).addClass("open");                
    }, function() {
            HideMenu();
            $('#about-pull').animate({'top':'-350px'})
            $("#fuzz").fadeOut();
    });     
    $('#portfolio').toggle(function() {
            var h = $('#portfolio-pull').height();
            var new_t = h-70;
            $('#portfolio-pull').animate({'top':new_t}).addClass("open");
    }, function() {
            HideMenu();
            $('#portfolio-pull').animate({'top':'-150px'})
            $("#fuzz").fadeOut();
    });

我所做的改变是：

您不需要在每个循环中调用“HideMenu”，该函数只需找到相关（打开）菜单并关闭它。
您似乎在代码中使用“open”和“openMenu”作为类名，我将其更改为只使用“open”。
您没有在#about的处理程序中调用HideMenu函数，因为之后没有（）。
您甚至没有尝试在#portfolio

希望它有所帮助 - 我没有测试它，只是纠正了跳出来的错误：）

一次一个下拉菜单 - 设置一个标志

1 个答案: