0

借助我在这个站点上找到的一些编码，我在 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 课程的作用。

提前致谢！

4

2 回答 2

0

没问题 ：）

让我们从这个开始：

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

这包含了所有 jQuery 代码。它定义了一个匿名函数并将其附加到事件$(document).ready含义上——此代码仅在加载整个 DOM 后运行。这是必需的，因为如果在加载元素之前运行以下代码，它将对它们没有影响，

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

此行选择所有带有 的元素class="submenu"，隐藏它们 - 并将所有子菜单的数组返回给 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.
  }
});
于 2013-06-16T18:53:09.150 回答
0

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

  1. 单击的菜单组已关闭（即它没有close类）

    !$this.hasClass('close')

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

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

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

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

  2. 单击的菜单组已打开。在这种情况下唯一需要做的就是关闭菜单：

    $target.slideUp();
$this.removeClass('close');
于 2013-06-16T18:59:08.833 回答