我在 Meteor 中的 Materialise 导航有一个奇怪的问题。奇怪的是,当我单击导航中的链接时,侧边栏或模式仅在第二次单击时加载。因此,我必须单击一次链接(没有任何反应),然后再次单击该链接才能显示该元素。之后,元素会在任何点击时加载(只需要点击一次)。
我从来没有遇到过这个问题,我认为这可能是 Materialise 的问题。不过,在我计算具体化之前,我想和你们核实一下,看看我是否可能调用了我的 JQuery 函数错误之类的。这是代码:
标题.html:
<template name="header">
<nav>
{{> sideNav}}
<div class="nav-wrapper">
<a href="#" class="brand-logo center"><span class="light"></span>hamok</a>
<ul id="nav-mobile" class="left">
<li><a href="#" data-activates="slide-out" class="button-collapse show-on-large"><i class="mdi-navigation-menu"></i></a></li>
<li><a href="#"><i class="mdi-action-search left"></i>Search</a></li>
</ul>
<ul id="nav-mobile" class="right">
{{#if currentUser}}
<li><a id="logout">Sign out</a></li>
{{else}}
<li><a class="modal-trigger-login" href="#loginModal">Account<i class="left mdi-action-account-circle"></i></a></li>
{{/if}}
</ul>
</div>
</nav>
{{> loginModal}}
</template>
<template name="loginModal">
<div id="loginModal" class="modal">
<div class="modal-content">
{{> atForm}}
</div>
</div>
</template>
<template name="sideNav">
<ul id="slide-out" class="side-nav">
<li><a href="#!">First Sidebar Link</a></li>
<li><a href="#!">Second Sidebar Link</a></li>
</ul>
</template>
header.js
Template['header'].helpers({
});
Template['header'].events({
'click .modal-trigger-login': function() {
$('.modal-trigger-login').leanModal();
},
'click #logout': function() {
Meteor.logout();
},
'click .button-collapse': function() {
$(document).ready(function(){
$(".button-collapse").sideNav();
});
}
});
谢谢大家的观看!
最佳答案
leanModal
所做的是初始化 jQuery 插件,因此它应该在您的模板 onRendered
函数内部调用,而不是在单击模态触发按钮时调用。
Template.header.onRendered(function(){
this.$(".modal-trigger-login").leanModal();
});
您可以删除您的click .modal-trigger-login
事件:您目前需要 2 次点击,因为第一次点击只会初始化插件。
同样,您的 sideNav
初始化调用应该在 onRendered
生命周期事件中进行:
Template.header.onRendered(function(){
this.$(".button-collapse").sideNav();
});
关于javascript - 需要点击两次来加载 Modal 和 SideNav(Meteor with Materialize),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29759597/