jquery - 帮助将 javascript 函数移植到 jQuery - 学习工具

Question

我刚刚开始学习 jQuery，我想看看我能用下面的函数做什么。此函数添加或删除 css 类以创建下拉菜单(它实际上是 Stu Nicholl 著名的下拉菜单)。但我还没有走得太远(我已经学习 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');
  });
});

就目前而言，这是有效的，但接下来的一点被证明是棘手的。所以，如果有人想试一试，请做我的客人:)

Answer 1

未经测试，但我认为这可以满足您的需求。

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