javascript - Meteor js 1.7点击事件未在移动设备上注册

Question

我建立了一个简单的主页，导航栏变成了小型设备上的汉堡包。在网络上（和浏览器中的移动视图）这工作正常。导航栏向下滑动，按钮工作等。

在实际移动设备上进行测试时，页面加载时默认打开移动导航，并且汉堡包不响应点击/触摸。我一直无法弄清楚为什么它默认打开，但我更关心现在触发的触摸事件。

我读过 3 年前的类似文章，但最近没有发现任何东西。

导航栏模板：

<template name="navbar">
<header>
    <div class="container">
        <img id="logo" src="/img/logo.png" alt="Logo.png">
        <nav class="site-nav {{menuStatus}}">
            <ul>
                <li><a href="/" id="home"><i class="fa fa-home site-nav--icon"></i>Home</a></li>
                <li><a href="/about" id="about"><i class="fa fa-info site-nav--icon"></i>About</a></li>
                <li><a href="/services" id="services"><i class="fa fa-pencil site-nav--icon"></i>Services</a></li>
                <li><a href="/careers" id="careers"><i class="fa fa-usd site-nav--icon"></i>Careers</a></li>
                <li><a href="/contact" id="contact"><i class="fa fa-envelope site-nav--icon"></i>Contact</a></li>
                <button class="login" >Login</button>
            </ul>
        </nav>
        <div class="menu-toggle">
            <a href="#" class="hamburger"></a>
        </div>
    </div>
</header>

导航栏关联的js：

import './navbar.html';
import './navbar.css';
import { ReactiveVar } from 'meteor/reactive-var'

Template.navbar.onCreated(function OnCreated() {
    this.menuStatus = new ReactiveVar(' ');
});

Template.navbar.helpers({
  menuStatus: function(){
      return Template.instance().menuStatus.get()
  }
});

Template.navbar.events({
    'click .menu-toggle': (e, template) => {
        let menuStatus = template.menuStatus.get();
        if (menuStatus == ' ') {
            template.menuStatus.set('site-nav--open');
        } else {
            template.menuStatus.set(' ');
        }
    },
});

我曾尝试使用 jquery 来实现相同的目标，但没有运气。如果有人知道为什么会发生这种情况，或者有更好的实践指导，我将不胜感激。

标签： javascriptmeteor