Jquery 弹出菜单

Question

我有一个无序列表，其中的 anchor 位于小部件中。用户可以将该小部件放置在屏幕上的任何位置。用户应该单击 li a 元素，然后就会出现一个隐藏的 div。我的脚本通常处理固定位置，如果用户将此宽度移动到屏幕上的另一个位置，这可能会出现问题。我正在寻找插件或一些关于如何在特定情况下使其最灵活的指南。任何帮助将不胜感激。

这是到目前为止我的代码。 CSS 处理绝对定位非常简单。

$(document).ready(function(){

         /*
            TODO 
        1. swap classes after clicking
         */


            $("a#link1").click(function(){
                $("a#link2").removeClass("on"); 
                $("#linkContentsWrap2").hide();
                $(this).addClass("on");
                $("#linkContentsWrap").show();

                return false;
            });



            $("a#link2").click(function(){
                $("a#link1").removeClass("on"); 
                $("#linkContentsWrap").hide();
                $(this).addClass("on");
                $("#linkContentsWrap2").show();

                return false;
            });



            });

            $(document).click(function(e){ 
                      if (!$(e.target).parents().filter('#linkContentsWrap').length) { 
                                  // close your dialog 
                                  $("a#link1").removeClass("on");
                                  $("#linkContentsWrap").hide();
                       } 
            }); 
            $(document).click(function(e){ 
                      if (!$(e.target).parents().filter('#linkContentsWrap2').length) { 
                                  // close your dialog 
                                  $("a#link2").removeClass("on");
                                  $("#linkContentsWrap2").hide();
                       } 
            }); 

Answer 1

小部件应该绝对定位在包含的 div 中(听起来就像您所做的那样)，但菜单应该绝对定位在小部件内相对定位的 div 中。它有很多层 div，但相对定位的中间 div 应该在移动父小部件 div 时保持弹出菜单就位。