关闭响应式菜单

Question

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

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