bugfix> javascript > 投稿

デスクトップとタブレットで正常に動作するサイドバーメニューがあります。しかし、モバイルデバイスに問題があります。モバイルでは、サイドバーメニューは自動的に折りたたまれません。トグルをクリックしたときにのみ閉じますが、メニュー以外の場所をクリックすると自動的に閉じるか、ルートが変更されたときに閉じます。

以下にコードを示します。

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>

追加情報が必要な場合はお知らせください。

回答 1 件
  • touchstartイベントは、メニューではないdivにバインドできます。これは、メニュー以外がタッチされた場合、閉じることを意味します。

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

あなたの答え