在我的wordpress网站上,我已经加载了一个ajax页面,其中包含官方的二十六个主题和店面主题。
唯一的问题是,一旦单击链接并且ajax脚本已获取并加载新页面,则移动导航菜单不会关闭。
我已经浏览了其他大多数类似主题,并尝试了各种jquery片段,但未能使其正常运行。
二十六个菜单切换按钮的代码是:
<button id="menu-toggle" class="menu-toggle toggled-on" aria-expanded="true" aria-controls="site-navigation social-navigation">Menu</button>
菜单容器html是:
<div class="menu-main-container">
<ul id="menu-main" class="primary-menu">
<li id="menu-item-292" class="menu-item menu-item-type-post_type menu-item-
object-page menu-item-292"><a href="https://example.com/my-account/">My
account</a></li>
<li id="menu-item-293" class="menu-item menu-item-type-post_type menu-item-
object-page menu-item-293"><a href="https://example.com/labels/">Labels</a>
</li></ul>
</div>
从对这件事的研究来看,似乎有两种方法可以实现我所追求的目标。
expanded="true"
更改为expanded="false"
可以解决问题吗? 我找到了此代码段,但不知道我将如何实现
$(function () {
$('li').on('click', function (e) {
var menuItem = $( e.currentTarget );
if (menuItem.attr( 'aria-expanded') === 'true') {
$(this).attr( 'aria-expanded', 'false');
} else {
$(this).attr( 'aria-expanded', 'true');
}
});
});
使用jQuery单击功能来触发切换按钮。
$(“#menu-main”).click(function(){ $(“#menu-toggle”).click(); });
任何帮助将不胜感激!谢谢!
答案 0 :(得分:1)
尝试
$(function () {
$('#menu-main li>a').on('click', function (e) {
$( "#menu-toggle" ).click();
});
});
或
$(function () {
$('#menu-main li>a').on('click', function (e) {
// i set $(".toggled-on") because i dunno which is your main menu
//<div class="menu-main-container">
// or
//<ul id="menu-main" class="primary-menu">
$(".toggled-on").attr("aria-expanded","false");
$(".toggled-on").removeClass(".toggled-on");
});
});
答案 1 :(得分:0)
希望这可以解决您的问题,谢谢
$("#menu-toggle").click(function(e){ /*for click on menu*/
$('.menu-main-container').toggle()
})
$('.menu-item').click(function(e){ /*for click on link*/
$("#menu-toggle").trigger('click')
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="menu-toggle" class="menu-toggle toggled-on" aria-expanded="true" aria-controls="site-navigation social-navigation">Menu</button>
<div class="menu-main-container">
<ul id="menu-main" class="primary-menu">
<li id="menu-item-292" class="menu-item menu-item-type-post_type menu-item-
object-page menu-item-292"><a href="https://example.com/my-account/">My
account</a></li>
<li id="menu-item-293" class="menu-item menu-item-type-post_type menu-item-
object-page menu-item-293"><a href="https://example.com/labels/">Labels</a>
</li></ul>
</div>