问题描述
我正在使用移动下拉菜单在wordpress网站上工作.下拉菜单可以正常工作,但是单击下拉菜单中的任何链接只会关闭菜单,而不会转到该链接.
I'm working on a wordpress site with a mobile dropdown menu. The dropdown works fine but clicking on any link in the dropdown menu just closes the menu and doesn't go to the link.
我找不到用于此功能的JS代码,因此是否可以添加任何代码来确保单击菜单div中的任何菜单项不会关闭菜单?
I can't find the JS code for this functionality so is there any code I can add to make sure clicking on any menu item within the menu div won't close the menu?
下面是html.这是网站:www.nomad8.com
Below is the html.Here's the site: www.nomad8.com
<header class="edgtf-mobile-header">
<div class="edgtf-mobile-header-inner">
<div class="edgtf-mobile-header-holder">
<div class="edgtf-grid">
<div class="edgtf-vertical-align-containers">
<div class="edgtf-mobile-menu-opener">
<a href="javascript:void(0)">
<span class="edgtf-mobile-opener-icon-holder">
<i class="edgtf-icon-font-awesome fa fa-bars " ></i> </span>
</a>
</div>
</div>
</div>
</div>
</div>
<nav class="edgtf-mobile-nav">
<div class="edgtf-grid">
<ul id="menu-production-1" class=""><li id="mobile-menu-item-5597" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home edgtf-active-item"><a href="http://mysite/about" class=" current "><span>menuiteams</span></a></li></span></a></li>
</ul>
</div>
</nav>
</div>
</header>
更新:
我已将此代码添加到标题中,并且可以正常工作.但是锚标记并不是一直都有效.仅在第一次点击时:
I've added this code to the header and it kind of works. But the anchor tags don't work all the time. Only on the first click:
(function($) {
$(document).ready(function(){
$(".edgtf-mobile-menu-opener").click(function(){
$('.edgtf-mobile-nav').fadeToggle(300);
$('.edgtf-mobile-nav').css("display", "block");
$('.edgtf-mobile-nav').css("height", "100px !important");
e.stopPropagation();
});
$(".edgtf-mobile-nav .edgtf-grid").click(function(e){
e.stopPropagation();
});
$('.edgtf-mobile-nav > li').click(function(){
$('.edgtf-mobile-nav').fadeIn('fast');
});
});
})(jQuery);
推荐答案
我希望我可以在chrome浏览器中检查您的代码.这将有助于确定菜单列表包装机/容器.
I wish i could inspect your code in chrome broswer. That would have helped to determine the menu list wrapper/container.
但是我猜你的包装器是 edgtf-mobile-menu-opener
But i am guessing that your wrapper is edgtf-mobile-menu-opener
但是,您可以定位包含移动菜单列表的包装器,并执行以下操作:
However, you can target the wrapper that contains mobile menu list and the do something like this:
$(document).ready(function(){
$(".edgtf-mobile-menu-opener").click(function(){
$('.edgtf-mobile-nav').fadeToggle(2000)
});
fadeToggle 将淡入菜单,直到您再次单击菜单图标
fadeToggle will fade the menu in and it will stay until you click the menu-icon again
先尝试一下,然后看看
好,清除缓存.
但是,我想知道您在wp主题中将脚本添加到的位置,因为您可能错误地添加了它.
However, i would like to know where you added the script to in your wp theme because you can be adding it wrongly.
这篇关于无法单击下拉菜单中的菜单链接的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!