Javascript 理解JQuery。可折叠菜单

我在JQuery中创建了一个可折叠的菜单，这是我在这个网站上找到的一些代码的帮助

一切正常。但现在是时候让我了解它是如何工作的，以及为什么工作的

JQuery：

jQuery(document).ready(function($) {
var submenu = $('.submenu').hide();

$('.open').click(function() {
  $this = $(this);
  $target =  $this.parent().next();

  if(!$this.hasClass('close')){
     $('.open').removeClass('close');
     submenu.slideUp();
     $this.addClass('close');
     $target.slideDown();
  }else{
     $target.slideUp();
     $this.removeClass('close');
  }
});
});

HTML和CSS在这里：

有人能帮我把代码分解一下，解释一下它的作用吗

我知道当页面加载时，它隐藏了我的.submenu类。 当我单击类时，打开.子菜单。滑落

但是我有点迷失了它对我的近距离课堂的影响

提前谢谢

没有问题：）

让我们从这个开始：

jQuery(document).ready(function($){});

这涵盖了所有jQuery代码。它定义了一个匿名函数并将其附加到事件

$（document）.ready

意思是-此代码仅在加载整个DOM后运行。这是必需的，因为如果在加载元素之前运行以下代码，则不会对元素产生任何影响

var submenu = $('.submenu').hide();

此行使用

class=“submenu”

拾取所有元素，隐藏它们-并将所有子菜单的数组返回给子菜单变量。解释的其余部分将在每一行上进行注释：

$('.open').click(function() { // the following code will run if you click an element with class="open"

  $this = $(this); // $this will hold the element you clicked
  $target =  $this.parent().next(); // $target will hold the next element (relevant single submenu)

  if(!$this.hasClass('close')){ // if the current element is open (marked by class="closed")
     $('.open').removeClass('close'); // remove the "close" class from all main menu items
     submenu.slideUp(); // close all submenus
     $this.addClass('close'); // add "close" class only to the clicked main menu item
     $target.slideDown(); // open the correct submenu (the element after the clicked main menu item)
  }else{ // if current submenu is already open
     $target.slideUp(); // close it
     $this.removeClass('close'); // remove class "close" from the main menu item.
  }
});

---

当用户单击菜单组时，需要考虑两种情况：

单击的菜单组已关闭（即，它没有

close

类）

如果是这样，首先必须关闭所有打开的菜单，并相应地设置它们的类：

$('.open').removeClass('close');
submenu.slideUp();

然后，您可以展开单击的菜单组，并将其标记为当前打开：

$this.addClass('close');
$target.slideDown();

单击的菜单组已打开。在这种情况下，只需关闭菜单：

$target.slideUp();
$this.removeClass('close');

---

非常感谢您抽出时间！：）

$target.slideUp();
$this.removeClass('close');