Jquery Flyout Menu

I have an unordered list with anchors living in a widget. This widget can be placed anywhere on the screen by the user. A user should click on an li a element and a hidden div should appear. My script generally handles a fixed position which can be an problem if the user moves this width to another location on the screen. I'm searching for plugin or some guidance on how to make this the most flexible given the circumstances. Any help would be greatly appreciated.

Here is my code so far. CSS is pretty straight forward handling absolute positioning.

$(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();
                       } 
            }); 

The widget should be absolutely positioned within a containing div (as it sounds like you've done) but the menu should be absolutely positioned within a relatively positioned div within the widget. It is a lot of layers of divs but the relatively positioned middle div should keep the flyout menu in place while moving the parent widget div.

I would highly suggest you use jQuery UI's menu (http://wiki.jqueryui.com/Menu) plugin. Not only can you use ThemeRoller (http://jqueryui.com/themeroller/), but you have the familiar jQuery/jQuery UI architecture you have with tabs, etc.