Question

我在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位于此处：JSFIDDLE！

有人可以为我打破代码，并解释它的作用。

我知道它在页面加载时会隐藏我的.submenu类。当我点击课程时。打开.submenu。向下滑动

但是我对我的.close课程有点失落。

提前致谢！

Answer 1

没问题：）

让我们从这开始：

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

Answer 2

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

点击的菜单组已关闭（即它没有close类）
```
!$this.hasClass('close')
```
如果是这样，您首先必须关闭所有打开的菜单，并相应地设置其类：
```
$('.open').removeClass('close');
submenu.slideUp();
```
然后，您可以展开单击的菜单组，并将其标记为当前打开：
```
$this.addClass('close');
$target.slideDown();
```
点击的菜单组已经打开。在这种情况下唯一需要做的就是关闭菜单：
```
$target.slideUp();
$this.removeClass('close');
```

理解JQuery。可折叠的菜单

2 个答案: