Question

有人可以向我解释一下吗？我试图理解为什么li标签内的下拉列表工作正常但是当使用表单时，菜单在任何地方点击时都会消失。

menu.find('ul li > a').bind('click', function (event) {
  event.stopPropagation();
}

它与：

组合使用

$("html").click(function() {
  menu.find('.active').removeClass('active');
});

包含菜单示例的完整代码：

Answer 1

您还希望停止传播到form的{{1}}个事件（应该是html）。

更改选择器以选择后代document元素。

Answer 2

如果您将第一张支票更改为menu.find('ul li>*')，那么它似乎有效。我认为该行只处理链接点击，而您的表单元素不是链接。

Answer 3

<form>是一个与其他元素一样的元素，因此，它应该有资格使用CSS选择器（由find()函数调用）进行选择。

您需要更改选择器以包含<form>标记，并可能将选择器更改为<input>元素而不是<a>。

有关jQuery选择器的更多信息，请参阅：http://api.jquery.com/category/selectors/

Answer 4

这段代码

$("html").click(function() {
  menu.find('.active').removeClass('active');
});

将删除菜单的active类，并在页面上的任何位置检测到点击时隐藏它。

但是

menu.find('ul li > a').bind('click', function (event) {
  event.stopPropagation();});

在下拉列表中检测到点击时会覆盖第一段代码。

因此，您可以添加以下代码来覆盖第一段代码，以便在单击表单时取消隐藏。

menu.find('ul > form').bind('click', function (event) {
  event.stopPropagation();});