Question

我是Meteor（和javascript）的新手，并试图找出如何整合这里找到的Codrops侧边栏菜单：Codrops。我创建了一个“侧边栏”模板，所有脚本都正确加载。

我有以下HTML代码：

<div class="morph-button morph-button-sidebar morph-button-fixed">
    <button type="button"><span class="icon icon-cog">Settings Menu</span></button>
    <div class="morph-content">
        <div>
            <div class="content-style-sidebar">
                <span class="icon icon-close">Close the overlay</span>
                <h2>Settings</h2>
                <ul>
                    <li><a class="icon icon-camera" href="#">Default filters</a></li>
                    <li><a class="icon icon-server" href="#">Storage Use</a></li>
                    <li><a class="icon icon-heart" href="#">Favorites</a></li>
                </ul>
            </div>
        </div>
    </div>
</div><!-- morph-button -->

这个Meteor回调的javascript代码：

Template.sidebar.events({
    'click .morph-button': function () {
        $('.morph-content').transition();
    }
});

Template.sidebar.rendered = function () {
    $('.morph-content').transition();
};

我无法理解其工作原理。我得到了有趣的结果。非常感谢！

Answer 1

我无法在您正在谈论的菜单上找到很多文档。所以我将采用更多JS方法来回答这个问题。

在事件中，您将transition（）附加到$（'。morph-content'），这是您在呈现DOM时已经完成的。我会假设那个人不属于。您可能只需要在渲染下附加它，并且包含的JS可以将它需要的所有其他东西附加到DOM（即，当您将$（'。date'）。datepicker（）添加到HTML元素时。

流星回调Codrops菜单

1 个答案: