使用jquery将单级转换为多级下拉菜单

Question

我刚刚开发了一个使用jquery的单级下拉菜单...如何重构相同的代码，使其成为一个多级下拉菜单......

这是我的工作样本 ....

我用过的jquery，

$(document).ready(function() {
$("#Programming ul.child").removeClass("child");
$("#Programming li").has("ul").hover(function() {
   $(this).addClass("current").children("ul").fadeIn();
     }, function() {
    $(this).removeClass("current").children("ul").stop(true, true).css("display",
                                                                     "none");
                              });
                            });
​

编辑：

Menu1       Menu2
 SubMenu1    SubMenu1
 Submenu2    SubMenu2
    SubMenu21       
    SubMenu22

第二个子菜单级别可以是任何...

Answer 1

由于你的代码在隐藏/显示列表的子代码方面非常通用，我所做的只是在LI元素中嵌套另一个UL，然后根据它的父元素定位它：

http://jsbin.com/oteze/5

（没有JS更改，只是针对三级菜单项的新CSS系列）

#Programming li ul li ul { left:100px;top:0px; }

Answer 2

你有什么理由不想使用现有的jquery插件吗？

一个好的是： http ： //users.tpg.com.au/j_birch/plugins/superfish/

Suckerfish已经存在多年了，因为纯粹的JS版本就像你可以得到的那样坚固。

即使你不使用它，我也相信检查他的来源是有帮助的。

Answer 3

这是我的解决方案： http ： //jsbin.com/oteze/9我在Firefox 3.6.8上测试过它。 ADD：现在它也适用于IE7。

您可以在任何地方嵌套任意数量的子菜单。 就像那样：

<li><a href="#">Child 1.2</a>
   <ul class="child">
       <li><a href="#">Child 1.2.1</a></li>
       <li><a href="#">Child 1.2.2</a></li>
   </ul>                                                      
</li>

我稍微修改了你的代码，所以第一级子菜单和其他级别之间存在差异。 我还将所有显示/隐藏逻辑移动到JS。

   $(document).ready(function() {

        $("#Programming ul.child-first-level").hide();
        $("#Programming ul.child").hide();

        $("#Programming ul.child").each(function(index) {
            $(this).css("margin-left", $(this).parent().css("width"));
        });


        $("#Programming li ul.child-first-level").parent().hover(
            function() {
                $(this).children("ul").fadeIn();
            },
            function() {
                $(this).children("ul").stop(true, true).css("display", "none");
            }
        );

        $("#Programming li ul.child").parent().hover(
            function() {
                var offset = $(this).children("ul").offset();
                offset.top = 0;
                $(this).children("ul").offset(offset);
                $(this).children("ul").css("margin-left", $(this).parent().css("width"));
                $(this).children("ul").fadeIn();
            },
            function() {
                $(this).children("ul").stop(true, true).css("display", "none");
            }
        );

   });