jQuery 多 div 下拉菜单

Question

我几乎可以正常工作了，但我对 jQuery 失去了理智(我不是很擅长，但正在学习)

这是 fiddle :http://jsfiddle.net/5CRA5/4/

因为我无法向您显示动态创建的帖子查询的下拉列表，所以我在操作和设置按钮下方创建了一个搜索按钮，您可以单击该按钮，该按钮本来应该位于 div 下拉列表中。

一切都很好，除了当或如果有人按下设置菜单，然后他们点击操作。它只会拉走菜单，而不是放置新菜单。我以为我的代码是正确的，但它不是那样工作的。我必须错过一些东西。所有其他菜单都很好用，因为它可以将它们拉开并放置正确的菜单。

此外，有没有办法让帖子在 div 完全启动之前不会发生？所以当你把它放回去时，它看起来是无缝的。我发现现在是这样。有时您会看到它在启动之前替换了信息。

下面是 jQuery 代码，供那些可以查看它并了解我做错了什么的人使用。

        function menuCall(div_id, bottom, filename) {
            $('[id^="menu_"]').animate({"top": "-50px"}, "slow");
            $('[id^="menu_"]').delay(500).queue( function(next){$(this).hide();next();});

            $.post("/opserv/" + filename, function(ajaxresult){
                $('#'+div_id).html(ajaxresult);
            });

            if ($('#'+div_id).css('top') !== bottom + 'px') {
                $('#'+div_id).queue( function(next){$(this).show();next();});
                $('#'+div_id).animate({"top": "+" + bottom + "px"}, "slow");
            } else {
                $('#'+div_id).animate({"top": "-50px"}, "slow");
                $('#'+div_id).delay(500).queue( function(next){$(this).hide();next();});
            }
        }

Answer 1

我相信发生这种情况是因为您指的是同一个 div - Operations 和 Settings 按钮都指向 menu_panel-2 ，这会导致 div 在您按两次 Settings 或两次 Operations 时切换(显示和隐藏菜单)。所以你必须首先找到一种方法来告诉功能按下了哪个按钮 - 无论是设置还是操作。我通过简单地向 function -> "type"添加一个新变量来实现它。然后，您必须检查操作类型是“Ops”还是“设置”类型是“Set”。然后，如果它是其中之一，您只需显示 div。请注意，这不会让您在打开后隐藏操作或设置菜单，隐藏它的唯一方法是切换到搜索，然后再次单击搜索。所以你必须通过简单地添加一个变量来为你保存它来检查最后按下的按钮是哪个，然后你将它与“类型”进行比较。

http://jsfiddle.net/5CRA5/12/

   var check = ''
function menuCall(div_id, bottom, filename,type) {
    $('[id^="menu_"]').animate({"top": "-50px"}, "slow");
    $('[id^="menu_"]').delay(500).queue( function(next){$(this).hide();next();});

    $.post("/opserv/" + filename, function(ajaxresult){
        $('#'+div_id).html(ajaxresult);
    });

    if ($('#'+div_id).css('top') != bottom + 'px') {
        $('#'+div_id).queue( function(next){$(this).show();next();});
        $('#'+div_id).animate({"top": "+" + bottom + "px"}, "slow");
    } else {
        if(type=='Ops' || type =='Set'){
            if (check == type){
               $('#'+div_id).animate({"top": "-50px"}, "slow");
            $('#'+div_id).delay(500).queue( function(next){$(this).hide();next();}); 
            }
            else{
            $('#'+div_id).queue( function(next){$(this).show();next();});
            $('#'+div_id).animate({"top": "+" + bottom + "px"}, "slow");
            } 
        }
        else{
        $('#'+div_id).animate({"top": "-50px"}, "slow");
        $('#'+div_id).delay(500).queue( function(next){$(this).hide();next();});
        }

    }
    check = type;
}

希望这对您有所帮助。