jQuery：带有控件的 onclick 下拉菜单答案

【问题标题】：jQuery: onclick drop-down menu with controlsjQuery：带有控件的 onclick 下拉菜单
【发布时间】：2012-02-04 03:40:38
【问题描述】：

我希望创建一个菜单（注册菜单），请参阅this 了解它。当用户单击此按钮/链接时，会出现一个下拉菜单，他可以使用该菜单执行某些操作（此处为登录）。

链接的行为应该如下：

单击此按钮/链接时应出现下拉菜单。
当点击页面上的任意位置（包括按钮/链接本身）但在菜单之外时，菜单应该消失。
如果单击下拉菜单上的某处，该菜单不应消失。
下拉菜单中的所有控件都应该可以工作。

我确实设法让前三个工作，但下拉菜单中的控件（第 4 个行为）不起作用。

javascript/jQuery 代码连同 html 代码给出here（jsfiddle 链接，同上）。你可以 fork 并进行更改。

谢谢。

【问题讨论】：

哈！我只是问了或多或少相同的问题......你可以在这里看到我的（有点坏的）解决方案：stackoverflow.com/questions/9138236/jquery-easy-pulldown-menu

标签： javascript jquery

【解决方案1】：

检查一下

http://thefinishedbox.com/files/freebies/loginfreebie/index.html

下载代码

http://thefinishedbox.com/freebies/scripts/jquery-dropdown-login/

【讨论】：

这正是我想要实现的，我查看了这个页面的 jQuery 代码。你能解释一下，你在做什么。
添加了下载源检查的链接
我已经通过查看源代码获得了代码。我以为你自己构建了那个例子，所以我希望你能解释一下。但现在正如我所见，情况并非如此。明白了！

【解决方案2】：

我在你的 jsFiddle 上创建了一个分支：http://jsfiddle.net/DukyJ/

如果您查看代码，我刚刚添加了一个额外的 div 来包含页面的内容，因此我不必将点击事件分配给整个主体，只分配给该 div。然后，我删除了 return false 和 stopProppagation，只是在 href 中的链接中添加了一个“#”，因为它不是必需的。最后只是为登录链接和唱歌面板添加了一些样式，这样您就可以看到菜单出现在内容上方，就像我想的那样。

【讨论】：

下拉菜单中的控件尚未工作。例如，尝试选中“记住我”复选框，它不会起作用。同样，如果您添加指向“忘记密码”或“立即注册”的链接（代替“#”），它将不起作用。似乎是因为 'event.preventDefault();'。
@user1144616 我可以看到。我能想到的最简单的方法是在复选框上捕获 mouseup 和 keyup 事件（因为复选框似乎是唯一受影响的事件）并手动选中/取消选中它。再次尝试 jsfiddle 链接以查看它。