Javascript not closing anchor menu items on responsive menu

JavaScript
1

Hi
I’m using a responsive menu that works great until you click on menu items that are anchors on the same page. The menu doesn’t close automatically on click. All works fine with links to a new page but not to anchors on the same page. Any suggestions please? I’m a js novice.

P.s. The menu is fixed.

html

<nav class="op-bar" id="topnav">
<h1 class="logo"><a href="index.html" id="logo">Odyssey<span class="red">minibus</span>hire</a></h1>
<div id="head-mobile"></div>
<div class="button"></div>
<ul>

<li><a href="index.html">Home</a></li>
<li><a href="services.html#about">About Us</a></li>
<li><a href="services.html#services">Our Services</a></li>
<li><a href="index.html#quote"> Request Quote</a></li>
<li><a href="contact.html#contact">Contact Us</a></li>
</ul>
</nav>
</div>

// JavaScript Document

(function($) {
$.fn.menumaker = function(options) {  
 var topnav = $(this), settings = $.extend({
   format: "dropdown",
   sticky: false
 }, options);
 return this.each(function() {
   $(this).find(".button").on('click', function(){
     $(this).toggleClass('menu-opened');
     var mainmenu = $(this).next('ul');
     if (mainmenu.hasClass('open')) { 
       mainmenu.slideToggle().removeClass('open');
     }
     else {
       mainmenu.slideToggle().addClass('open');
       if (settings.format === "dropdown") {
         mainmenu.find('ul').show();
       }
     }
   }); 
   
   topnav.find('li ul').parent().addClass('has-sub')
multiTg = function() {
     topnav.find(".has-sub").prepend('<span class="submenu-button"></span>');
     topnav.find('.submenu-button').on('click', function() {
       $(this).toggleClass('submenu-opened');
       if ($(this).siblings('ul').hasClass('open')) {
         $(this).siblings('ul').removeClass('open').slideToggle();
       }
       else {
         $(this).siblings('ul').addClass('open').slideToggle();
       }
     });
   };
   if (settings.format === 'multitoggle') multiTg();
   else topnav.addClass('dropdown');
   if (settings.sticky === true) topnav.css('position', 'fixed');
resizeFix = function() {
  var mediasize = 700;
     if ($( window ).width() > mediasize) {
       topnav.find('ul').show();
     }
     if ($(window).width() <= mediasize) {
       topnav.find('ul').hide().removeClass('open');
     }
   };
   resizeFix();
   return $(window).on('resize', resizeFix);
 });
  };

})

(jQuery);

(function($){
$(document).ready(function(){
$("#topnav").menumaker({
   format: "multitoggle"
});
});
})(jQuery);

Thank you

2 
$(document).ready(function(){
 $('ul').hide(1000);
 $('#logo').on('click',function(){   
   var a=$('ul').css('display');
   if(a==='none'){
   $('ul').show(1000);
   }else{
    $('ul').hide(1000); 
   }
   $('li').on('click',function(e){
     var b=$(this).children('a');
     window.location=b.attr('herf');
     e.preventDefault();
     $('ul').hide(1000);
   });
   
 });  
 
});
3

Thanks but can’t get this to work. It is still staying open after clicking to menu item that is an anchor. From Googling this it seems a fairly common issue? Any other suggestions?

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.