关闭resonsive菜单

Question

我有一个很好的响应菜单。但是，当访问者点击我的菜单中的项目时，我想要关闭菜单。此时，只有当访问者点击'button_menu'时，菜单才会关闭。如果有人点击“子菜单按钮”，菜单必须保持打开状态。我怎样才能做到这一点？

<script> 
(function($) { 
$.fn.menumaker = function(options) { 
var cssmenu = $(this), settings = $.extend({ 
    format: "dropdown", 
    sticky: false 
}, options); 
return this.each(function() { 
    $(this).find(".button_menu").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(); 
     } 
    } 
    }); 
    cssmenu.find('li ul').parent().addClass('has-sub'); 
multiTg = function() { 
    cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>'); 
    cssmenu.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 cssmenu.addClass('dropdown'); 
    if (settings.sticky === true) cssmenu.css('position', 'fixed'); 
resizeFix = function() { 
    var mediasize = 1000; 
    if ($(window).width() > mediasize) { 
     cssmenu.find('ul').show(); 
    } 
    if ($(window).width() <= mediasize) { 
     cssmenu.find('ul').hide().removeClass('open'); 
    } 
    }; 
    resizeFix(); 
    return $(window).on('resize', resizeFix); 
}); 
    }; 
})(jQuery); 

(function($){ 
$(document).ready(function(){ 
$("#cssmenu").menumaker({ 
    format: "multitoggle" 
}); 
}); 
})(jQuery); 
</script> 

HTML：

<header> 
      <nav id="cssmenu"> 
       <div class="logo"> 
        <a href="http://www. .com"> 
        <img alt="" src="images/logo.png"></a> </div> 
       <div id="head-mobile"> 
       </div> 
       <div class="button_menu"> 
       </div> 
       <ul id="myTopnav" class="navigation"> 
        <li class="active" data-slide="1"> 
        <a onclick="myFunction()">HOME</a></li> 
        <li data-slide="2"><a onclick="myFunction()">PRODUCTS</a> 
        <ul> 
         <li> 
         <a onclick="window.location.href='http://www.'"> 
         ROTARY STAGES</a></li> 
         <li> 
         <a onclick="window.location.href='http://www.'"> 
         LINEAR STAGES</a></li> 
         <li> 
         <a onclick="window.location.href='http://www.'"> 
         MULTI-DOF STAGES</a></li> 
         <li> 
         <a onclick="window.location.href='http://www.'"> 
         DRIVERS</a></li> 
        </ul> 
        </li> 
        <li data-slide="4"><a onclick="myFunction()">TRADE FAIRS</a></li> 
        <li data-slide="6"><a onclick="myFunction()">COMPANY</a></li> 
        <li data-slide="16"><a onclick="myFunction()">TECHNOLOGY</a></li> 
        <li data-slide="8"><a onclick="myFunction()">CAREERS</a></li> 
        <li data-slide="10"><a onclick="myFunction()">CONTACT</a></li> 
       </ul> 
      </nav> 
     </header> 

Answer 1

你可以简单地装上单击事件到ul你.menumaker内，并检查点击的原始目标是否是一个.submenu-button内，以确定是否关闭：

return this.each(function() { 
 
    $(this).find(".button_menu").on('click', function(){ 
 
    // Your current button event remains the same 
 
    }).next('ul').on('click.checkToClose', function(e) { 
 
     var target = e.originalEvent.target; 
 
     if ($(target).closest('.submenu-button').length === 0) { 
 
      $(this).slideToggle().removeClass('open'); 
 
     } 
 
    }); 
 
    // ... 
 
});

或者，如果你想只为贴着如果菜单链接被点击，就可以更加简单：

return this.each(function() { 
 
    // ... 
 
    var mainmenu = $(this).find(".button_menu").next('ul'); 
 
    mainmenu.on('click.checkToClose', 'a', function(e) { 
 
     if ($(this).closest('.submenu-button').length === 0) { 
 
      mainmenu.slideToggle().removeClass('open'); 
 
     } 
 
    }); 
 
    // ... 
 
});