Question

我目前正在尝试在meteor网站上制作简单todos教程应用的材料设计版本。但是当我为Android编译应用程序时触摸导航栏按钮实际上做任何事情都有问题。问题的GIF - http://i.imgur.com/vRMhIfy.gif

HTML Snippit：

<header class="fixed-navbar">
    <nav class="light-blue" role="navigation">
        <div class="nav-wrapper container">
            <a id="logo-container" href="#" class="brand-logo">Simple Tasks</a>

            <ul class="left hamburger">
                <li><a href="#" class="categories hide-on-large-only" data-activates="mobile-demo"><i
                        class="mdi-navigation-menu"></i></a></li>
            </ul>

            <ul class="right">
                <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Menu</a></li>
            </ul>


            <ul id="dropdown1" class="dropdown-content">
                <li><a href="#!">Account</a></li>
                <li><a href="#!">Settings</a></li>
                <li class="divider"></li>
                <li><a href="#!">About</a></li>
            </ul>
        </div>
    </nav>
</header>

<div class="side-nav fixed" id="mobile-demo" style="  min-height: 100%;">
    <div class="sidebar">
        <ul>
            <li><a href="">All Tasks</a></li>
            <li><a href="">Unsorted</a></li>
            <li><a href="">Placeholder</a></li>
            <li><a href="">Another Placeholder</a></li>
        </ul>
    </div>

</div>

相关的Javascript：

if (Meteor.isClient) {
    $( document ).ready(function(){
        console.log("Document ready!");
        $(".categories").sideNav();
    });
}

通过使用最新版本的物化（alpha版本v0.96.1）的this package的分叉版本，物化css和javascript包含在应用程序项目中

感谢任何帮助！

Answer 1

很可能这是由代码中的javascript错误引起的。

通常在开发模式下，您的文件不会连接在一起，因此如果您遇到错误，则不会阻止其他任何应用程序停止工作。

这在生产模式中有所不同。如果您有一个js异常，则其余代码都不会运行。这可能就是为什么JS没有运行来设置侧导航点击事件。

要在开发模式下使用javascript控制台修复此应用程序的加载，并找到JS错误并修复它。一旦你这样做，它应该在生产模式下正常工作。

此外，最好在模板的onrendered回调中运行$(".categories").sideNav();，但这可能不是您的问题：

Template.xxxx.onRendered(function() {
    $(".categories").sideNav();
});

其中xxxx是包含.categories导航栏的模板。

当为Android编译流星应用程序时，物化导航栏的行为被破坏

1 个答案: