jQuery/can'我找不到避免代码添加类的方法

jQuery/can't find a way to avoid code adding a class

本文关键字:代码 添加 方法 找不到 can jQuery      更新时间:2024-04-14

我目前正在修改FlexNav插件。我没有悬停以打开子菜单,而是将其更改为单击打开。

现在的问题是,需要单击两次才能打开子菜单。

我知道问题是,当菜单首次打开时,代码会将类"flexnav show"添加到子菜单ul中。单击子菜单触发器将删除该类,但不会导致任何结果,然后再次单击添加该类以打开子菜单。

如果有人能给我指出代码中的正确位置,在那里我可以避免在所有ul上添加类。或者,如果有人有更好的想法。。。

$.fn.flexNav = function(options) {
var $nav, $top_nav_items, breakpoint, count, nav_percent, nav_width, resetMenu, resizer, settings, showMenu, toggle_selector, touch_selector;
settings = $.extend({
  'animationSpeed': 250,
  'transitionOpacity': true,
  'buttonSelector': '.menu-button',
  'hoverIntent': false,
  'hoverIntentTimeout': 150,
  'calcItemWidths': false,
  'hover': false
}, options);
$nav = $(this);
$nav.addClass('with-js');
if (settings.transitionOpacity === true) {
  $nav.addClass('opacity');
}
$nav.find("li").each(function() {
  if ($(this).has("ul").length) {
    return $(this).addClass("item-with-ul").find("ul").hide();
  }
});
if (settings.calcItemWidths === true) {
  $top_nav_items = $nav.find('>li');
  count = $top_nav_items.length;
  nav_width = 100 / count;
  nav_percent = nav_width + "%";
}
if ($nav.data('breakpoint')) {
  breakpoint = $nav.data('breakpoint');
}
showMenu = function() {
  if ($nav.hasClass('lg-screen') === true && settings.hover === true) {
    if (settings.transitionOpacity === true) {
      return $(this).find('>ul').addClass('flexnav-show').stop(true, true).animate({
        height: ["toggle", "swing"],
        opacity: "toggle"
      }, settings.animationSpeed);
    } else {
      return $(this).find('>ul').addClass('flexnav-show').stop(true, true).animate({
        height: ["toggle", "swing"]
      }, settings.animationSpeed);
    }
  }
};
resetMenu = function() {
  if ($nav.hasClass('lg-screen') === true && $(this).find('>ul').hasClass('flexnav-show') === true && settings.hover === true) {
    if (settings.transitionOpacity === true) {
      return $(this).find('>ul').removeClass('flexnav-show').stop(true, true).animate({
        height: ["toggle", "swing"],
        opacity: "toggle"
      }, settings.animationSpeed);
    } else {
      return $(this).find('>ul').removeClass('flexnav-show').stop(true, true).animate({
        height: ["toggle", "swing"]
      }, settings.animationSpeed);
    }
  }
};
resizer = function() {
  var selector;
  if ($(window).width() <= breakpoint) {
    $nav.removeClass("lg-screen").addClass("sm-screen");
    if (settings.calcItemWidths === true) {
      $top_nav_items.css('width', '100%');
    }
    selector = settings['buttonSelector'] + ', ' + settings['buttonSelector'] + ' .touch-button';
    $(selector).removeClass('active');
    return $('.one-page li a').on('click', function() {
      return $nav.removeClass('flexnav-show');
    });
  } else if ($(window).width() > breakpoint) {
    $nav.removeClass("sm-screen").addClass("lg-screen");
    if (settings.calcItemWidths === true) {
      $top_nav_items.css('width', nav_percent);
    }
    $nav.removeClass('flexnav-show').find('.item-with-ul').on();
    $('.item-with-ul').find('ul').removeClass('flexnav-show');
    resetMenu();
    if (settings.hoverIntent === true) {
      return $('.item-with-ul').hoverIntent({
        over: showMenu,
        out: resetMenu,
        timeout: settings.hoverIntentTimeout
      });
    } else if (settings.hoverIntent === false) {
      return $('.item-with-ul').on('mouseenter', showMenu).on('mouseleave', resetMenu);
    }
  }
};
$(settings['buttonSelector']).data('navEl', $nav);
touch_selector = '.item-with-ul, ' + settings['buttonSelector'];
$(touch_selector).append('<span class="touch-button"><i class="navicon">&#9660;</i></span>');
toggle_selector = settings['buttonSelector'] + ', ' + settings['buttonSelector'] + ' .touch-button';
$(toggle_selector).on('click', function(e) {
  var $btnParent, $thisNav, bs;
  $(toggle_selector).toggleClass('active');
  e.preventDefault();
  e.stopPropagation();
  bs = settings['buttonSelector'];
  $btnParent = $(this).is(bs) ? $(this) : $(this).parent(bs);
  $thisNav = $btnParent.data('navEl');
  return $thisNav.toggleClass('flexnav-show');
});
$('.touch-button').on('click', function(e) {
  var $sub, $touchButton;
  $sub = $(this).parent('.item-with-ul').find('>ul');
  $touchButton = $(this).parent('.item-with-ul').find('>span.touch-button');
  if ($nav.hasClass('lg-screen') === true) {
    $(this).parent('.item-with-ul').siblings().find('ul.flexnav-show').removeClass('flexnav-show').hide();
  }
  if ($sub.hasClass('flexnav-show') === true) {
    $sub.removeClass('flexnav-show').slideUp(settings.animationSpeed);
    return $touchButton.removeClass('active');
  } else if ($sub.hasClass('flexnav-show') === false) {
    $sub.addClass('flexnav-show').slideDown(settings.animationSpeed);
    return $touchButton.addClass('active');
  }
});
$nav.find('.item-with-ul *').focus(function() {
  $(this).parent('.item-with-ul').parent().find(".open").not(this).removeClass("open").hide();
  return $(this).parent('.item-with-ul').find('>ul').addClass("open").show();
});
resizer();
return $(window).on('resize', resizer);

};

代码将第34行中的类"flexnav show"添加到所有子"ul"节点。

当调用函数showMenu时,该代码正在运行。