Removing and adding Classes on Dropdown Menus on Hover

Question

I have a Navigation built that have drop down menus,

HTML STRUCTURE LIKE SO

<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>

When You Hover On the a.js-c-header__subnav-trigger It addes a class to its self as well as its sibling ul ( the dropdown menu)

This is perfect but since the hover is triggered on the 'a' element If I toggle the class when and I go to hover on the drop down menu it gets removed before I can because of hovering off the 'a' element.

If I just add the classes and do not use toggle how would I remove both classes once I hover off the A element or Dropdown menu.

What needs to be achieved is

1.) If main nav link is hovered add an active class to itself and drop down is triggered and can be seen. If you hover out WITHOUT engaging the dropdown both active and dropdown class are removed

2.) If main nav link is hovered add an active class to itself and if dropdown IS engaged by user keep both classes until dropdown is hovered out of or 'A' Element.

CURRENT 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);

Thanks In Advance for any help.

Live Site Link to see http://100dc.vincebrown.me/integrity-pledge

about question #1: your dropdown is currently triggered on CLICK, is your purpose to modify the trigger to fire your dropdown on HOVER? — GrafiCode
– GrafiCode, Commented Oct 9, 2015 at 21:07
here is a jsfiddle, I commented out the _isMobile: jsfiddle.net/jwzr9L3s — depperm
– depperm, Commented Oct 9, 2015 at 21:08
about #2: what do you mean with "if dropdown IS engaged by user"? — GrafiCode
– GrafiCode, Commented Oct 9, 2015 at 21:09

depperm · Accepted Answer · 2015-10-09 21:14:47Z

1

So I would make a few changes, I would move the s-c-header__subnav-triggerclass to the parent li. I would then change the jquery to use the hover(in,out). The in function would look something like

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

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

and the out

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

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

Here is a jsfiddle

answered Oct 9, 2015 at 21:14

depperm

10.8k4 gold badges46 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

VinceBrown Over a year ago

THANKKKK YOU ! Working like a charm

Collectives™ on Stack Overflow

Removing and adding Classes on Dropdown Menus on Hover

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related