無法單擊下拉菜單中的菜單鏈接

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

...只是反正思考