Je travaille sur un site Web avec Meteor et Materialize-css, et j'essaie de mettre en place un menu déroulant dans la barre de navigation, qui s'active au survol de la souris plutôt qu'au clic.
J'ai mes fichiers de cette façon :
HTML :
<ul id="dropdown1" class="dropdown-content">
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
</ul>
<nav>
<div class="nav-wrapper">
<ul class="left hide-on-med-and-down">
<li><a href="stackoverflow.com/">Home</a></li>
<li><a class="dropdown-button" href="#" data-activates="dropdown1">Services
Available</a></li>
</ul>
</div>
</nav>
</template>JS :
Template.nav.onRendered(function () {
$(".dropdown-button").dropdown({
hover: true
});
});(J'ai eu brièvement l'impression, à cause de quelque chose que j'ai mal interprété, que $(".dropdown-button").dropdown() ne faisait rien. En revanche, il active la liste déroulante. C'est juste qu'il ne prend pas le hover: true ou toute autre option d'ailleurs. Pourquoi cela ne s'enregistre-t-il pas ? Est-ce que quelque chose m'échappe ? Les recherches que j'ai effectuées indiquent que la liste déroulante ne fonctionne pas du tout sans .dropdown() être appelé template.onRendered() . Je dois pouvoir lui passer des options, mais je ne parviens pas à le faire fonctionner.
Certaines choses que j'ai installées avec meteor add :
- fourseven:scss
- materialize:materialize v0.97.7 (0.97.8 crashes meteor, actuellement)
- fer : routeur
J'ai fait un peu plus de recherches après avoir posté cette question, et j'ai été dirigé vers le site suivant ce poste . Comme le suggère cette réponse, je suis convaincu que le problème que je rencontre est lié à la disponibilité du DOM, mais je suis un peu perdu. J'ai essayé d'utiliser Tracker.afterFlush() mais cela n'a pas semblé aider, donc je suis toujours bloqué.
Toute aide est grandement appréciée, merci.
