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

Question

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.

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?

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>

UPDATE:

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

Answer 1

I wish i could inspect your code in chrome broswer. That would have helped to determine the menu list wrapper/container .

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 will fade the menu in and it will stay until you click the menu-icon again

Just try that first and lets see

Well, clear the cache.

However, i would like to know where you added the script to in your wp theme because you can be adding it wrongly.

Answer 2

Add this to the CSS. It's an issue with the theme framework itself it looks like. I had this issue myself and this worked as a fix.

.dropdown-backdrop{
position: static;
}

Answer 3

That is most probably because you toggle (open/close) the navigation whenever you click on .edgtf-mobile-header .

Try to change the toggle selector to .edgtf-mobile-opener-icon-holder .

Answer 4

Thanks to @Dayo-Greats answer I managed to work this out..kind of.

Here's the code that makes things work. But for some reason #anchortag menu links still don't work. Otherwise the links are now clickable. Any reason wy the anchor tags wouldn't work?

Here's my code:

(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

I don't have a privilege to make a comment yet.

However, you did not pass the function argument( function() ) before you called e.stopPropagation(); as seen below:

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

Quickly fix a bug in the your new code like this function(e)

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

Try it again and lets see

Answer 6

At the same time, i am thinking you can use another approach that shows the menu again, even when you clicked on the menu li element like this:

....

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

...just thinking anyway