无法单击下拉菜单中的菜单链接 [英] Can't click on menu links in drop down menu

问题描述

我正在使用移动下拉菜单在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.

这篇关于无法单击下拉菜单中的菜单链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！