Reputation: 1775
My (restricted) code works in a sandbox (below), and 6/7 elements with the same code structure work in the wild, however, the last element on the live website (in mobile view) will not toggle its submenu open:
The element is in the footer.
There are no console errors, and the code is identical for the other elements, e.g. Company, Product etc...
Help appreciated.
$($ => {
$("footer .fl-module-heading").on("click", showSubMenu);
})
function showSubMenu() {
const $headerAll = $("footer .fl-col-content").find(".fl-module-heading");
const $header = $(this);
const $menuAll = $("footer .fl-col-content").find(".footer-text-links");
const $menu = $(this).next();
$headerAll.not($header).removeClass("up-arrow");
$header.toggleClass("up-arrow");
$menuAll.not($menu).addClass("hide-block");
$menu.toggleClass("hide-block");
}
.hide-block {display: none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<footer>
<div id="ftr-hdr-resources" class="fl-module fl-module-heading fl-node-42nz5yakdp10" data-node="42nz5yakdp10">
<div class="fl-module-content fl-node-content geot-module">
<h4 class="fl-heading">
<span class="fl-heading-text">Resources</span>
</h4>
</div>
</div>
<div id="ftr-menu-resources" class="fl-module fl-module-menu fl-node-pxj8u5qi32ra footer-text-links hide-block" data-node="pxj8u5qi32ra">
<div class="fl-module-content fl-node-content geot-module">
<div class="fl-menu">
<div class="fl-clear"></div>
<nav aria-label="Menu" itemscope="itemscope" itemtype="https://schema.org/SiteNavigationElement">
<ul id="menu-footer-resources-new" class="menu fl-menu-horizontal fl-toggle-none">
<li id="menu-item-20536" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://mandoestage.wpengine.com/blog/">Blog</a></li>
<li id="menu-item-20534" class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="https://mandoestage.wpengine.com/blog/topic/case-studies/">Case Studies</a></li>
<li id="menu-item-20537" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="https://help.mandoemedia.com">Help Centre</a></li>
<li id="menu-item-20535" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://mandoestage.wpengine.com/about-us/">About</a></li>
</ul>
</nav>
</div>
</div>
</div>
<div id="ftr-hdr-support" class="fl-module fl-module-heading fl-node-i97aup4mj6wx" data-node="i97aup4mj6wx">
<div class="fl-module-content fl-node-content geot-module">
<h4 class="fl-heading">
<span class="fl-heading-text">Support</span>
</h4>
</div>
</div>
<div id="ftr-menu-support" class="fl-module fl-module-rich-text fl-node-pse70yr5j6cd footer-text-links hide-block" data-node="pse70yr5j6cd">
<div class="fl-module-content fl-node-content geot-module">
<div class="fl-rich-text">
<p><a href="tel:1800 905 495">1800 905 495</a></p>
<p><a href="/contact/support/">Email Support</a></p>
</div>
</div>
</div>
</footer>
EDIT: I've updated the code to work with classes more efficiently.
What I can't replicate in the sandbox is the geo-functionality.
If you visit the live website while connected to an Australian VPN, in a mobile view you will see the Contact header doesn't expand its submenu. This Contact header appears about 1 second after the other headers. From Jonas' answer, I'm using .on
, but this is still not working for the Contact heading.
Help appreciated.
Upvotes: 0
Views: 64
Reputation: 627
Since the 'Support' entry is managed by your geo-targeting, it is added to the DOM after jQuery binds the click event.
Use on()
to bind the click event, then it should work.
Upvotes: 2