Question: Hi have two different megamenus, which cannot be displayed by css based on the html markup. Therefore I want to use Javascript/jQuery. 

```
HTML of links:
<li id="menu-item-154" class="tg-submenu__link .tg-submenu__tg menu-item menu-item-type-post_type menu-item-object-page menu-item-154">
<a href="#">MEGAMENU-LINK1</a></li>

<li id="menu-item-155" class="tg-submenu__link .tg-submenu__abteilungen menu-item menu-item-type-post_type menu-item-object-page menu-item-155">
<a href="#">MEGA MENU LINK2</a></li>

HTML of the mega menu containers
<div class="tg-submenu tg-submenu__tg" data-trigger="tg-submenu__tg">
</div>

<div class="tg-submenu tg-submenu__abteilungen" data-trigger="tg-submenu__abteilungen">
</div>

```

So I'd like to run a function, which checks if the links has the same classes (.tg-submenu\_\_tg and .tg-submenu\_\_abteilungen) or the same data-trigger attribute and if so add a class to the particular mega menu container by hovering the corresponding link. I could easily write two separate functions which test this isolated but I need an universal function, cause the links may change or more links may be added in the future.

Answer: 
* problem is in your class ".tg-submenu\_\_abteilungen" here "." not
acceptable
* You can use .hasClass('classname')

> 
> Code
> 
> 
> 

```
$(document).on('li','click',function(){
    if($(this).hasClass('tg-submenu__abteilungen')){
    // console.log('Link has tg-submenu__abteilungen CLASS');
    } else {
    //console.log('Link hasn't tg-submenu__abteilungen CLASS');
    }
});

```
Ok, this is what I came up by using .hasClass, which was adviced by @Darshit Hedpara:

```
jQuery(document).ready (function ($) {
var $tg_body = $('body'),
    $tg_top_menu = $('ul.nav'),
    $tg_submenu_link = $('.tg-submenu__link');

    $tg_submenu_link.hover(function() { 
    if (! $(this).closest('li.tg-submenu__link').length || $(this).hasClass('tg-submenu__link') && $(this).hasClass('tg-submenu__link--tgkonz')) {
        $tg_body.addClass('tg-submenu__tg--active tg-showDropdown');
        $tg_body.removeClass('tg-hover').addClass('tg-hover');
        tg_menu_hover_triggered = true;
    }
    else {
        $tg_body.addClass('tg-submenu__abteilungen--active tg-showDropdown');
        $tg_body.removeClass('tg-hover').addClass('tg-hover');
    }
}, function () {
    $tg_body.removeClass('tg-submenu__tg--active tg-submenu__abteilungen--active tg-showDropdown');
    $tg_body.addClass('tg-submenu__removing');

    tg_menu_hover_triggered = false;

    setTimeout(function () {
        if (! $tg_body.hasClass('tg-showDropdown')) {
            $tg_body.removeClass('tg-hover').removeClass('tg-submenu__removing');
        }
    }, 200);
});
});

```

This is not for universal purpose. For example, if I decide to include a third megamenu, I would to rewrite the code. If someone has an idea to make this universal with a callback function or has some ideas to make this a way more performant/best practice, feel free to repost. I'll keep an eye on this topic!