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 broswer检查你的代码。这将有助于确定菜单列表包装器/容器。

但我猜你的包装是 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（）; 之前，您没有传递函数参数（ function（）），如下所示：

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

快速修复新代码中的错误，例如功能（e）

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

......无论如何都要思考

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

6 个答案: