Javascript 菜单。在（'；上单击'；，函数（）说明

有人能给我解释一下这个js代码吗？ Especia菜单。在（'click'，function（）部分。

---

最后是（）这对我来说完全是个例外，我是js新手，想知道项目中的这些东西。

答案1

   (function() {

  var nav = $('nav'),
    menu = $('nav h1'),
    main = $('main'),
    open = true,
    hover = true;

  menu.on('click', function() {
        open != open ? false : true;
    nav.toggleClass('menu-active');
    main.toggleClass('menu-active');
    nav.removeClass('menu-hover');
    main.removeClass('menu-hover');

  });
  menu.hover( 
    function() {
      if (!open) {
        nav.addClass('menu-hover');
        main.addClass('menu-hover');
      }
    }, function() {
      nav.removeClass('menu-hover');
      main.removeClass('menu-hover');
    }
  );

})();

“on”是一个JQuery语句，它侦听某个事件并在满足该事件时执行函数

在我们的例子中，它监听“menu”元素上的“click”事件。它基本上是在用户单击菜单元素时执行函数（回调函数）

答案2

当使用以下语法定义函数时，它被称为立即调用函数表达式（IIFE）

我们基本上将函数包装在一组括号中，然后立即附加另一组括号

  (function() {
    // Code goes here..    
  })();

这意味着函数一经声明就会立即执行。这些类型的函数通常用于不污染全局命名空间

其他链接：

---

答案1

   (function() {

  var nav = $('nav'),
    menu = $('nav h1'),
    main = $('main'),
    open = true,
    hover = true;

  menu.on('click', function() {
        open != open ? false : true;
    nav.toggleClass('menu-active');
    main.toggleClass('menu-active');
    nav.removeClass('menu-hover');
    main.removeClass('menu-hover');

  });
  menu.hover( 
    function() {
      if (!open) {
        nav.addClass('menu-hover');
        main.addClass('menu-hover');
      }
    }, function() {
      nav.removeClass('menu-hover');
      main.removeClass('menu-hover');
    }
  );

})();

“on”是一个JQuery语句，它侦听某个事件并在满足该事件时执行函数

在我们的例子中，它监听“menu”元素上的“click”事件。它基本上是在用户单击菜单元素时执行函数（回调函数）

答案2

当使用以下语法定义函数时，它被称为立即调用函数表达式（IIFE）

我们基本上将函数包装在一组括号中，然后立即附加另一组括号

  (function() {
    // Code goes here..    
  })();

这意味着函数一经声明就会立即执行。这些类型的函数通常用于不污染全局命名空间

其他链接：

在上面的代码片段中有一个IIFE（立即调用）函数 表达方式）

要在本质上是导航栏元素的菜单上注册

单击（）

和

悬停（）

事件

这是一种常见的行为，当您单击菜单时，它应该展开/折叠，这就是您的

click（）

函数正在执行的操作

单击导航栏时

• 有一个标志

  open

  ，用于保持导航栏状态（展开|折叠）
• 删除悬停事件设置为当前 导航栏打开或折叠

在

hover（）函数中

如果菜单已经打开，那么它将应用
。菜单悬停
类，该类应通过使背景稍暗或其他方式提供一些悬停效果

我希望这基本上回答了你的问题

在上面的代码片段中有一个IIFE（立即调用）函数
表达方式）

要在本质上是导航栏元素的菜单上注册
单击（）
和
悬停（）
事件

这是一种常见的行为，当您单击菜单时，它应该展开/折叠，这就是您的
click（）
函数正在执行的操作

单击导航栏时


有一个标志
open
，用于保持导航栏状态（展开|折叠）
删除悬停事件设置为当前
导航栏打开或折叠

在
hover（）函数中

如果菜单已经打开，那么它将应用
。菜单悬停
类，该类应通过使背景稍暗或其他方式提供一些悬停效果

我希望这基本上回答了你的问题