Question

我有一个无序列表，其中包含生成小部件的锚点。该小部件可以放置在用户的屏幕上的任何位置。用户应单击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应该在移动父窗口小部件时保持弹出菜单。

Answer 2

我强烈建议您使用jQuery UI的菜单（http://wiki.jqueryui.com/Menu）插件。您不仅可以使用ThemeRoller（http://jqueryui.com/themeroller/），而且您拥有熟悉的jQuery / jQuery UI架构，您可以使用标签等。

Jquery弹出菜单

2 个答案: