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

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 元素或下拉菜单上，我将如何删除这两个类。

需要实现的是

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-triggerclass 移动到父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