如何在页面锚点链接上选择时关闭移动菜单

Question

我已经添加了一些网站链接（https://jamesandgemmawedding.co.uk），然而，当通过移动菜单点击它时，它仍然打开占据屏幕的一半。我想在单击锚链接时关闭移动菜单。

我已经尝试将jQuery代码添加到custom.js文件中，但似乎没有任何工作。

这是HTML：

<div class="main-menu-container top-mobile-nav">
<ul id="primary-menu" class="menu">
<li id="menu-item-26" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-26"><a href="http://jamesandgemmawedding.co.uk#rsvp" aria-current="page">RSVP</a></li>
<li id="menu-item-27" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-27"><a href="http://jamesandgemmawedding.co.uk#ceremony" aria-current="page">Ceremony</a></li>
<li id="menu-item-28" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-28"><a href="http://jamesandgemmawedding.co.uk#accommodation" aria-current="page">Accommodation</a></li>
</ul>
</div>

这是custom.js文件中的JQuery：

// RESPONSIVE MENU
    jQuery( '.dt-menu-btn' ).on( 'click', function(){
        jQuery(this).toggleClass('toggeled');
        jQuery('.main-menu-container').toggleClass('top-mobile-nav')
    });

如上所述，我希望在单击菜单项时关闭移动菜单（切换），但是，我还没有尝试过任何工作。任何人都可以请一个解决方案的建议？先感谢您。

Answer 1

将以下内容添加到锚标记：

onclick="jQuery( '.dt-menu-btn' ).trigger('click')"

这将在滚动到适当的锚点时切换菜单。

例如，使用：

<a href="http://jamesandgemmawedding.co.uk#accommodation" aria-current="page" onclick="jQuery( '.dt-menu-btn' ).trigger('click')">Accommodation</a>

如果您无法编辑HTML，则可以通过jQuery绑定“click”。

jQuery('#primary-menu a').on('click', function() {
    jQuery( '.dt-menu-btn' ).trigger('click');
});