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>

Navbar关联的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来实现相同的目的，但是没有运气。如果有人知道为什么会发生这种情况，或者有任何更好的实践指导来做到这一点，我将不胜感激。

Meteor js 1.7 Click事件未在移动设备上注册

0 个答案: