我已经向网站(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')
});
如上所述,我希望在单击菜单项时关闭移动菜单(切换),但是,我尝试过的任何方法都没有起作用。任何人都可以提出解决方案的建议吗?预先谢谢你。
答案 0 :(得分:0)
在锚标记中添加以下内容:
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');
});