Question

你有两个不同的megamenus，基于html标记，css无法显示。因此我想使用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>

所以我想运行一个函数，它检查链接是否具有相同的类（.tg-submenu__tg和.tg-submenu__abteilungen）或相同的数据触发器属性，如果是，则添加一个类到通过悬停相应的链接特定的大型菜单容器。我可以很容易地编写两个单独的函数来测试这个孤立但我需要一个通用函数，因为链接可能会改变，或者将来可能会添加更多链接。

Answer 1

问题在你的班级＆＃34; .tg-submenu__abteilungen＆＃34;在这里＆＃34;。＆＃34;不
您可以使用.hasClass（＆＃39; classname＆＃39;）

代码

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

Answer 2

好的，这就是我使用.hasClass提出的，由@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);
});
});

这不是为了普遍目的。例如，如果我决定包含第三个megamenu，我会重写代码。如果某人有想法通过回调功能实现这种通用性，或者有一些想法使这种方式更有效/最佳实践，请随时重新发布。我会密切关注这个话题！

如果element class = element class或data-attr做某事

2 个答案: