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 CODE

 ;(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);
}

和out

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

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

这是jsfiddle

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

1 个答案: