Question

我对jQuery很生疏，可以使用一些建议。

-

(function($) {

  "use strict";

  var $navPrimary   = $('.nav__primary'),
      $navSecondary = $('.nav__secondary'),
      $navClose     = $('.nav__close');

  // Primary navigation
  $('.nav__primary__toggle').on('click', function(event) {

    event.preventDefault();

    reset();

    if (!$navPrimary.hasClass('nav__primary--open')) {
      $navPrimary.addClass('nav__primary--open');
    }

  });

  // Secondary navigation
  $('.nav__secondary__toggle').on('click', function(event) {

    event.preventDefault();

    reset();

    if (!$navSecondary.hasClass('nav__secondary--open')) {
      $navSecondary.addClass('nav__secondary--open');
    }

  });


  // Navigation close
  $('.nav__primary__close, .nav__secondary__close').on('click', function(event) {

    event.preventDefault();

    reset();

  });


  // Navigation reset
  var reset = function() {

    if ($navPrimary.hasClass('nav__primary--open')) {
      $navPrimary.removeClass('nav__primary--open');
    }

    if ($navSecondary.hasClass('nav__secondary--open')) {
      $navSecondary.removeClass('nav__secondary--open');
    }

  }

})(jQuery);

-

唯一真正的区别在于班级名称。其中一个导航是主导航，另一个是辅助导航。

然后导航切换位于导航元素之外。

任何方向都会很棒。

由于

Answer 1

只需使用函数和字符串连接：

(function($) {
    "use strict";

    setupNav("primary");
    setupNav("secondary");

    function setupNav(navType) {
        var $nav = $(".nav__" + navType);

        $('.nav__' + navType + '__toggle').on('click', function(event) {
            event.preventDefault();
            reset();

            $nav.addClass('nav__' + navType + '--open');
        });

        $('.nav__' + navType + '__close').on('click', function(event) {
            event.preventDefault();
            reset();
        });
    }

    function reset() {
        $('.nav__primary').removeClass('nav__primary--open');
        $('.nav__secondary').removeClass('nav__secondary--open');
    }

})(jQuery);

此外，除非您有多个符合.nav__primary或.nav__secondary的元素，否则您不需要hasClass检查（并且只需你问题中的代码，即使有多个元素，你也不需要它，所以我把它留在了上面。

您只需要hasClass检查是否有多个匹配元素，其中某些可能有类，而其他可能没有，并且您希望根据是否添加/删除其他类第一个有一个人。

简化jQuery操作

1 个答案: