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

Posted 2023-05-09

【中文标题】选择页面锚链接时如何关闭移动菜单

【英文标题】：How to close mobile menu when selecting on page anchor link

【发布时间】：2019-08-25 09:15:57

【问题描述】：

我添加了一些指向网站 (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')
    );

如上所述，我希望在单击菜单项时关闭移动菜单（切换），但是，我没有尝试过任何工作。任何人都可以就解决方案提出建议吗？提前谢谢你。

【参考方案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绑定“点击”。

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

【讨论】：

感谢您的回复。导航使用 WordPress 中的菜单，所以我不确定如何添加 onclick=？

@charlieg007 我编辑了我的回复以包含 jQuery 示例，您可以运行该示例以附加到链接的点击事件。

我已将 jQuery 添加到 custom.js 文件中，但这似乎没有任何作用，即在移动设备上单击菜单项时需要关闭菜单。关于它为什么不起作用的任何想法？