0

I wanted to change the hover menu dropdown to click or enter for accessibility reasons. I am able to make the dropdown buttons work on a single level but not on multilevel meaning a dropdown menu is not showing up when clicked inside dropdown.

Here is my jquery code:

jQuery(document).ready(function($){ $('.menu-item-has-children').on('click', function(e) { e.preventDefault();

  if (!$(this).hasClass('active')) {
    $(this).children('.dropdown-menu').slideDown(100);
    $('.menu-item-has-children').toggleClass('active');
    $(this).addClass('active');
}
  else{
    $('.dropdown-menu').slideUp(100);
    $('.menu-item-has-children').toggleClass('active');
  } 
})


$('.menu-item-has-children').on('enter', function(e) {
e.preventDefault();
 
  if (!$(this).hasClass('active')) {
    $(this).children('.dropdown-menu').slideDown(100);
    $('.menu-item-has-children').toggleClass('active');
    $(this).addClass('active');
}
  else{
    $('.dropdown-menu').slideUp(100);
    $('.menu-item-has-children').toggleClass('active');
  }
})

});

Navigation Html code:

    <nav id="top-menu-nav">
                        <ul id="top-menu" class="navbar-nav">
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-103" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-103 nav-item">
<a title="Home" href="http://megabot/leadscouncil/" class="nav-link">Home</a>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-107" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-has-children dropdown active menu-item-107 nav-item"><a title="About Us" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle nav-link" id="menu-item-dropdown-107">About Us</a>
<ul class="dropdown-menu" aria-labelledby="menu-item-dropdown-107" role="menu" style="display: none;">
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-1044" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1044 nav-item">
<a title="About Us" href="http://megabot/leadscouncil/about-us/" class="dropdown-item">About Us</a>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-505" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-505 nav-item">
<a title="Board of Directors" href="http://megabot/leadscouncil/board-of-directors/" class="dropdown-item">Board of Directors</a>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-105" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-98 current_page_item current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-has-children dropdown active menu-item-105 nav-item">
<a title="Leadership Awards" href="http://megabot/leadscouncil/leadership-awards/" class="dropdown-item" aria-current="page">Leadership Awards</a>
    <ul class="dropdown-menu" aria-labelledby="menu-item-dropdown-107" role="menu" style="display: none;">
        <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-1274" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-98 current_page_item menu-item-1274 nav-item">
<a title="Leadership Awards" href="http://megabot/leadscouncil/leadership-awards/" class="dropdown-item" aria-current="page">Leadership Awards</a>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-1173" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1173 nav-item">
<a title="Executive Leadership Awards" href="http://megabot/leadscouncil/executive-leadership-awards/" class="dropdown-item">Executive Leadership Awards</a>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-1172" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1172 nav-item">
<a title="Tim Burke Pioneer Award" href="http://megabot/leadscouncil/tim-burke-pioneer-award/" class="dropdown-item">Tim Burke Pioneer Award</a>
</li>
    </ul>
</li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-1157" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1157 nav-item">
<a title="FAQ" href="http://megabot/leadscouncil/faq/" class="dropdown-item">FAQ</a>
</li>
</ul>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-108" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children dropdown menu-item-108 nav-item">
<a title="Membership" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle nav-link" id="menu-item-dropdown-108">Membership</a>
<ul class="dropdown-menu" aria-labelledby="menu-item-dropdown-108" role="menu" style="display: none;">
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-1045" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1045 nav-item"><a title="Membership" href="http://megabot/leadscouncil/membership/" class="dropdown-item">Membership</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-1626" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1626 nav-item"><a title="Membership Directory" href="http://megabot/leadscouncil/membership-directory/" class="dropdown-item">Membership Directory</a></li>
</ul>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-1717" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown menu-item-1717 nav-item"><a title="Resource Hub" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle nav-link" id="menu-item-dropdown-1717">Resource Hub</a>
<ul class="dropdown-menu" aria-labelledby="menu-item-dropdown-1717" role="menu" style="display: none;">
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-1930" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1930 nav-item"><a title="Diversity Hub" href="http://hs.nxk.921.myftpupload.com/diversity-inclusion-hub" class="dropdown-item">Diversity Hub</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-1768" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown menu-item-1768 nav-item"><a title="Event Hub" href="http://hs.nxk.921.myftpupload.com/hs.events" class="dropdown-item">Event Hub</a>
    <ul class="dropdown-menu" aria-labelledby="menu-item-dropdown-1717" role="menu" style="display: none;">
        <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-1863" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1863 nav-item"><a title="Webinar &amp; Speaker Submissions" href="http://hs.nxk.921.myftpupload.com/speaker-inquiry" class="dropdown-item">Webinar &amp; Speaker Submissions</a></li>
    </ul>
</li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-1769" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1769 nav-item"><a title="News Hub" href="http://hs.nxk.921.myftpupload.com/hub" class="dropdown-item">News Hub</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-1729" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1729 nav-item"><a title="Legislative Hub" href="http://megabot/leadscouncil/legislative-map/" class="dropdown-item">Legislative Hub</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-1896" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1896 nav-item"><a title="Jobs Hub" href="http://megabot/leadscouncil/jobs/" class="dropdown-item">Jobs Hub</a></li>
</ul>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-106" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children dropdown menu-item-106 nav-item"><a title="LeadsCouncil Standards" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle nav-link" id="menu-item-dropdown-106">LeadsCouncil Standards</a>
<ul class="dropdown-menu" aria-labelledby="menu-item-dropdown-106" role="menu" style="display: none;">
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-1799" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1799 nav-item"><a title="Lead Generation Standards" href="http://megabot/leadscouncil/leadscouncil-standards/" class="dropdown-item">Lead Generation Standards</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-1795" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1795 nav-item"><a title="Due Diligence Checklist" href="http://megabot/leadscouncil/affiliate-due-diligence-checklist/" class="dropdown-item">Due Diligence Checklist</a></li>
</ul>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-104" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-104 nav-item"><a title="Contact Us" href="http://megabot/leadscouncil/contact-us/" class="nav-link">Contact Us</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-1587" class="login_link menu-item menu-item-type-custom menu-item-object-custom menu-item-1587 nav-item"><a title="Login" href="http://megabot/leadscouncil/my-account/" class="nav-link">Login</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-1594" class="logout_link menu-item menu-item-type-custom menu-item-object-custom menu-item-1594 nav-item"><a title="Logout" href="/wp-login.php?action=logout" class="nav-link">Logout</a></li>
</ul>                       </nav>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.