jQuery多个div下拉菜单

时间:2014-06-19 18:18:42

标签: jquery css

我有这个几乎工作,但我在jQuery上失去了理智(我不是很擅长,但学习)

这里是小提琴: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();});
            }
        }

1 个答案:

答案 0 :(得分:0)

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

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;
}

希望这有帮助。