无法单击下拉菜单中的菜单链接

Question

我正在使用移动下拉菜单在wordpress网站上工作。 下拉菜单可以正常工作，但是单击下拉菜单中的任何链接只会关闭菜单，并且不会转到该链接。

我找不到用于此功能的JS代码，因此可以添加任何代码来确保单击菜单div中的任何菜单项不会关闭菜单吗？

下面是html。 这是网站：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>

更新：

我已经将此代码添加到标题中，并且可以正常工作。 但是锚标记并非一直有效。 仅在第一次点击时：

(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); 

Answer 1

我希望我可以在Chrome浏览器中检查您的代码。 那将有助于确定菜单列表包装器/容器 。

但是我猜你的包装是edgtf-mobile-menu-opener

但是，您可以定位包含移动菜单列表的包装器，并执行以下操作：

$(document).ready(function(){
    $(".edgtf-mobile-menu-opener").click(function(){
    $('.edgtf-mobile-nav').fadeToggle(2000)
});

fadeToggle将淡入菜单，并且将保持不变 ，直到再次单击菜单图标

先尝试一下，看看

好吧，清除缓存。

但是，我想知道您在wp主题中将脚本添加到的位置，因为您可能会错误地添加它。

Answer 2

将此添加到CSS。 它看起来像是主题框架本身的问题。 我自己遇到了这个问题，并且可以解决此问题。

.dropdown-backdrop{
position: static;
}

Answer 3

这很可能是因为，只要您单击.edgtf-mobile-header就可以切换（打开/关闭）导航。

尝试将切换选择器更改为.edgtf-mobile-opener-icon-holder 。

Answer 4

感谢@ Dayo-Greats的回答，我设法解决了。

这是使事情正常运行的代码。 但是由于某些原因，＃anchortag菜单链接仍然无法使用。 否则，链接现在可以单击。 锚标签无法正常工作的原因是什么？

这是我的代码：

(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();
 // return;
});

      $(".edgtf-mobile-nav .edgtf-grid").click(function(e){

                    e.stopPropagation();
 // return;
});
});
})(jQuery); 

Answer 5

我还没有发表评论的特权。

但是，在调用e.stopPropagation（）之前，您没有传递函数arguments（ function（） ）； 如下图所示：

  (function($) {
    $(document).ready(function(){
     ....
    e.stopPropagation();

快速修复新代码中的错误（例如此函数）

  (function($) {
    $(document).ready(function(e){
     ....
     e.stopPropagation();

再试一次，让我们看看

Answer 6

同时，我想您可以使用另一种方法再次显示菜单，即使您单击菜单li元素时也是如此：

....

  $(".edgtf-mobile-menu-opener").click(function(){
  $('.edgtf-mobile-nav').fadeToggle('slow', function(){

   #-> trying to target ul>li 
   $('.edgtf-mobile-nav > li').click(function(){

   #-> and when clicked ('.edgtf-mobile-nav > li') then show menu again
   $('.edgtf-mobile-nav').fadeIn('fast');
        })

...只是反正思考