Question

所以我正在研究一个流星项目，并试图在用户点击它之外时关闭一个下拉菜单。我在使用jquery和普通html之前已经完成了这个，但这次我们使用的是velocity.js和meteor。

所以在打开下拉div的链接上，我有这个：

Template.layout.events({
'click #profile-btn': function () {
    if (userTog == false) {
        $('#user-menu').velocity("fadeIn", { duration: 150 });
        userTog = true;
    }
    else if (userTog == true) {
        $('#user-menu').velocity("fadeOut", { duration: 150 });
        userTog = false;
    }        
},
.....

然后我使用流星包处理身体上的事件，因为现在不支持..

Template.body.events({
'click html': function(e, data, tpl) {
    userTog = false;
    $('#user-menu').velocity("fadeOut", { duration: 150 });
    e.stopPropagation();
}});

然而，上面只是不起作用..它基本上只是使菜单出现然后立即消失。它与velocity.js，流星还是有关，我只是做错了吗？！？

任何建议都将不胜感激！

Answer 1

我只需要做一个材料设计选择框，所以我感觉到你的痛苦:-)。以下是我如何解决它：

通常，您只能关注input或anchor。我偶然发现的一个技巧是，在元素属性中使用tabindex="0"可以让它获得焦点，即使它是div。这是什么意思？好吧，如果你可以focus()一个元素，那意味着你可以blur()它。因此，当您单击下拉列表的按钮时，在事件处理程序的末尾添加一行，如$('.dropdown-menu').focus()。然后，为了逃避这一点，只需创建一个像'blur .dropdown-menu': function() {*..hide..*}这样的事件处理程序。这样，你就不会有这些丑陋的全球事件观察者。

缺点是你会得到一个发光的蓝色轮廓（出于可访问性的原因）。您可以通过在CSS中使用outline: 0;这样的行来摆脱这种情况。

PS，你之所以没有工作的原因是因为'click #profile-btn'冒充身体，所以它同时执行。要修复它，您需要通过e.stopPropagation();停止该bubblin。

在meteor

1 个答案: