Помогите перенести функцию javascript на jQuery - инструмент обучения - PullRequest
0 голосов
/ 08 октября 2009

Я только изучаю jQuery, и я хотел посмотреть, что я мог бы сделать с помощью функции ниже. Эта функция добавляет или удаляет классы CSS для создания выпадающего меню (на самом деле это хорошо известное выпадающее меню Стю Николла). Но я далеко не ухожу (я изучаю jQuery примерно час, так что мой обход DOM еще не до конца). Мне любопытно посмотреть, насколько изящным и элегантным может стать использование jQuery, и я подумал, что увижу, что вы, ребята, могли бы придумать. Вот существующая функция:

 var getEls = document.getElementById("menu").getElementsByTagName("LI");
 var getAgn = getEls;
 for (var i=0; i<getEls.length; i++) {
 getEls[i].onclick=function() {
 for (var x=0; x<getAgn.length; x++) {
 getAgn[x].className=getAgn[x].className.replace("unclick", "");
 getAgn[x].className=getAgn[x].className.replace("click", "unclick");
 }
 if ((this.className.indexOf('unclick'))!=-1) {
 this.className=this.className.replace("unclick", "");;
 }
 else {
 this.className+=" click";
 }
 }
 }
 }

Мой первый сбой начался так:

$(document).ready(function() {
  $('#menu > li').click(function() {
     $('#menu >li > ul').toggleClass('unclick');
  });
});

Это работает, насколько это возможно, но следующий бит оказался хитрым. Так что, если кому-то захочется пойти, пожалуйста, будьте моим гостем:)

1 Ответ

0 голосов
/ 08 октября 2009

Не проверено, но я думаю, что это то, что вы хотите.

jQuery(function () {
    var menus = jQuery('#menu li');
    var open_menu = function open_menu() {
        var menu_to_open = jQuery(this);
        if (menu_to_open.hasClass('open')) {
            menu_to_open.removeClass('open');
        } else {
            menus.removeClass('open');
            menu_to_open.addClass('open');
        }
    };
    menus.click(open_menu);
});
...