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

Question

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

这是我的工作 sample ....

我使用的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

由于您的代码对于隐藏/显示列表的子项非常通用，因此我所做的只是将另一个 UL 嵌套在 LI 元素内，然后根据其父项定位它:

http://jsbin.com/oteze/5

(没有 JS 更改，只是针对第三级菜单项的新 CSS 行)

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