Question

我在我的一个项目中使用jQuery Token Input插件和我的一个自定义编写的插件。

我的插件基本上将一个锚标记添加到它初始化的元素上，并且在单击锚链接时，会显示一个绑定到jquery token input插件的文本输入元素。

在FocusOut事件中，我想要隐藏文本输入（在这种情况下，这将是由jquery标记输入而不是文本输入初始化的ul。）

到目前为止一切正常。

但是，如果我按下alt键，主ul将按预期隐藏，但下拉列表ul仍然可见。

要查看我遇到的问题，您还可以查看此JSFiddle。对不起，关于CSS部分，我确实包含了CSS文件，但由于某种原因它没有按预期工作。

现在，如果你点击+ Add按钮输入和下拉（带说明），那么如果你点击预览窗口中的任何其他位置，它就会消失，这就是预期的行为。

但是，如果您单击添加按钮，一旦输入和下拉列表出现，然后按下alt键（启动焦点输出事件），输入消失，但下拉列表仍然显示。那是为什么？

造成这种情况的原因是什么？

如果我把它变得有点复杂，我道歉。以下是预期行为与问题之间的比较。

在这种情况下，用户点击+添加按钮＆gt;出现一个带有打开下拉菜单的输入框＆gt;用户通过点击正文中的其他位置来关注＆gt;输入和下拉消失。

这是预期的行为。

在这种情况下，用户点击+添加按钮＆gt;出现一个带有打开下拉菜单的输入框＆gt;用户按下触发焦点事件的alt键＆gt;输入消失但下拉不消失。

我也需要确保下拉列表在这种情况下也会消失。

注意：由于某种原因，Dropdown CSS在小提琴中搞砸了。显示type somethig的文本是下拉元素。

Answer 1

添加快捷方式库并添加以下代码。它的工作原理

shortcut.add("Alt", function() {
   $('.token-input-dropdown').hide()
        });

同样，请使用margin远离标记以避免事件重叠

a.addInput{
    margin:2px;
}
div.token-input-dropdown{
     margin:2px;
}