javascript - 在悬停时的下拉菜单上删除和添加类

Question

我构建了一个带有下拉菜单的导航，

HTML 结构如下

<li class="c-header__subnav-item c-header__subnav-item-is-hidden c-header__subnav-item-is-visible-md">
    <a class="c-header__subnav-links u-caps js-c-header__subnav-trigger" href="#">
    Action Review Review
      <i class="fa fa-angle-down fa-lg c-btn__icon-right-sm"></i>
    </a>
    <ul class="c-header__subnav-dd">
        <li class="c-header__subnav-dd-item">
        <a class="c-header__subnav-links c-header__subnav-links--dd" href="#">
        Overview
        </a>
        </li>
        <li class="c-header__subnav-dd-item">
        <a class="c-header__subnav-links c-header__subnav-links--dd" href="#">
        Review Form
        </a>
        </li>
        <li class="c-header__subnav-dd-item">
        <a class="c-header__subnav-links c-header__subnav-links--dd" href="#">
        Performance Card
        </a>
        </li>
        <li class="c-header__subnav-dd-item">
        <a class="c-header__subnav-links c-header__subnav-links--dd" href="#">
        Recent Recordings
        </a>
    </li>
    </ul>
    </li>

当您将鼠标悬停在 a.js-c-header__subnav-trigger 上时它向其自身及其同级 ul 添加一个类(下拉菜单)

这是完美的，但由于悬停是在“a”元素上触发的，如果我在何时切换类并且将鼠标悬停在下拉菜单上，它会在我之前删除，因为悬停在“a”元素上。

如果我只是添加类而不使用切换，一旦我将鼠标悬停在 A 元素或下拉菜单上，我将如何删除这两个类。

需要实现的是

1.) 如果主导航链接悬停，则向其自身添加一个事件类，并触发下拉菜单并可见。如果您将鼠标悬停在没有参与下拉菜单的情况下，事件和下拉菜单类都会被删除

2.) 如果主导航链接悬停，则为其自身添加一个事件类，如果用户使用下拉菜单，则保留这两个类，直到下拉菜单悬停在“A”元素之外。

当前 JQUERY 代码

 ;(function($, window, document, undefined) {

 var $win = $(window);
 var $doc = $(document);
 var $classes = {

    SubNavTrigger           : 'js-c-header__subnav-trigger',
    SubNavItemActive        : 'c-header__subnav-item-is-active',
    SubNavDropDown          : 'c-header__subnav-dd',
    SubNavDropDownActive    : 'c-header__subnav-dd-is-active'

 };

var _isMobile = false;
_isMobile = ($win.width() <= 1024) ? true : false;


 // Check if  user is on touch on page load
 // if isMobile use click events
// if not mobile use hover events
if(_isMobile) {

$("." + $classes.SubNavTrigger).on('click', function(){

if ( $(this).hasClass( $classes.SubNavItemActive ) ){

  // If Item has active class removeClass

  $(this).removeClass( $classes.SubNavItemActive )

} else {

  // If Item does not have active class addClass
  $(this).addClass($classes.SubNavItemActive);

} //End if

// Add Active Class To Subnav.
$(this).siblings().toggleClass($classes.SubNavDropDownActive);

});


} else {


$("." + $classes.SubNavTrigger).on('hover', function(){

$(this).addClass($classes.SubNavItemActive);

// Add Active Class To Subnav.
// If set to toggle impossible to hover on this menu.

$(this).siblings().addClass($classes.SubNavDropDownActive);


 });
}

})(jQuery, window, document);

提前感谢您的帮助。

实时站点链接查看 http://100dc.vincebrown.me/integrity-pledge

Answer 1

因此，我会进行一些更改，将 s-c-header__subnav-trigger 类移动到父 li 中。然后我将更改 jquery 以使用 hover(in,out) 。 in 函数看起来像

function () {
  $(this).addClass($classes.SubNavItemActive);

  // Add Active Class To Subnav.
  $(this).children().addClass($classes.SubNavDropDownActive);
}

和外面

function () {
  $(this).removeClass($classes.SubNavItemActive);

  // Add Active Class To Subnav.
  $(this).children().removeClass($classes.SubNavDropDownActive);
}

这是一个jsfiddle