Преобразование одного уровня в многоуровневое выпадающее меню с помощью 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");
                              });
                            });
​

EDIT:

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; }

Answer 2

Вот мое решение: http://jsbin.com/oteze/9 Я проверял это на Firefox 3.6.8. ДОБАВИТЬ: Теперь это работает и в 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");
            }
        );

   });

Answer 3

Есть ли причина, по которой вы не захотите использовать существующий плагин jquery, посвященный этому?

Хороший: http://users.tpg.com.au/j_birch/plugins/superfish/

Suckerfish существует уже много лет, как чистая версия JS, настолько надежная, насколько это возможно.

Даже если вы не используете это, я уверен, что было бы полезно проверить его источник.