Question

我有一个侧边栏菜单，可以在桌面和平板电脑上正常使用。但在移动设备中遇到问题。侧边栏菜单不会在手机中自动折叠。它仅在我点击切换时关闭，但是当我点击菜单外的任何地方时它应该自动关闭，或者当路线改变时它应该关闭。

这里有一些代码。

APP-menu.js

      $('.navbar-header, .main-menu').on('mouseenter',modernMenuExpand).on('mouseleave',modernMenuCollapse);

  function modernMenuExpand(){
    alert('first');
    if( $body.data('menu') == 'vertical-menu-modern'){
      $('.main-menu, .navbar-header').addClass('expanded');
      if($body.hasClass('menu-collapsed')){
        var $listItem = $('.main-menu li.menu-collapsed-open'),
        $subList = $listItem.children('ul');

        $subList.hide().slideDown(200, function() {
            $(this).css('display', '');
        });

        $listItem.addClass('open').removeClass('menu-collapsed-open');
        // $.app.menu.changeLogo('expand');
      }
    }
  }

  function modernMenuCollapse(){
    alert('second');
    if($body.hasClass('menu-collapsed') && $body.data('menu') == 'vertical-menu-modern'){
      setTimeout(function(){
        if($('.main-menu:hover').length === 0 && $('.navbar-header:hover').length === 0){

          $('.main-menu, .navbar-header').removeClass('expanded');
          if($body.hasClass('menu-collapsed')){
            var $listItem = $('.main-menu li.open'),
            $subList = $listItem.children('ul');
            $listItem.addClass('menu-collapsed-open');

            $subList.show().slideUp(200, function() {
                $(this).css('display', '');
            });

            $listItem.removeClass('open');
            // $.app.menu.changeLogo();
          }
        }
      },1);
    }
  }

sidebar.component.ts

import { Component, OnInit } from '@angular/core';
import { RouteInfo } from './sidebar.metadata';
import { Router, ActivatedRoute } from '@angular/router';

declare var $: any;
@Component({
    // moduleId: module.id,
    selector: 'app-sidebar',
    templateUrl: './sidebar.component.html',
})

export class SidebarComponent implements OnInit {

    constructor(private router: Router,
        private route: ActivatedRoute) {
    }

    ngOnInit() {
        $.getScript('./assets/app/js/core/app-menu.js');
        $.getScript('./assets/app/js/core/app.js');
    }

}

html

<!-- Sidebar Content starts -->
<div id="stackMenu" data-scroll-to-active="true" class="main-menu menu-fixed menu-light menu-accordion menu-shadow">
  <!-- main menu content-->
  <div class="main-menu-content">
    <ul id="main-menu-navigation" data-menu="menu-navigation" class="navigation navigation-main">
      <li>
        <a routerLink="dashboard">
          <span class="menu-title">Dashboard</span>
        </a>
      </li>
      <li>
        <a routerLink="list">
          <span class="menu-title">List</span>
        </a>
      </li>
      <li>
        <a routerLink="maps">
          <span class="menu-title">Main maps</span>
        </a>
      </li>
      <li>
        <a routerLink="components">
          <span class="menu-title">Components</span>
        </a>
      </li>
      <li>
          <a routerLink="settings">
            <span class="menu-title">Settings</span>
          </a>
        </li>
    </ul>
  </div>
</div>

如果您需要更多其他信息，请与我们联系。

Answer 1

您可以将touchstart事件绑定到不是菜单的任何div，这反过来意味着除了触摸菜单之外的其他任何内容它将关闭。

$('div').not('#main-menu-navigation').on('touchstart', function(){ 
    // close menu
});

侧边栏菜单未在手机中自动折叠

1 个答案: