0

所以我正在研究一个流星项目，并试图在用户点击它外部时关闭一个下拉菜单。我在使用 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，meteor有关还是我只是做错了？！？

任何建议将不胜感激！

4

1 回答 1

2

我只需要制作一个材料设计选择框，所以我能感受到你的痛苦:-)。这是我解决它的方法：

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

缺点是你会得到一个发光的蓝色轮廓（出于可访问性的原因）。outline: 0;你可以通过在你的css中设置一行来摆脱这个。

PS，你的不工作的原因是因为'click #profile-btn'气泡上升到身体，所以它同时执行。要修复它，您需要通过e.stopPropagation();.

于 2015-05-18T15:41:01.493 回答