Javascript jQuery单击“使用两个单独的元素显示/隐藏”问题

我正在尝试使用两个不同的触发器获取一个要显示和隐藏的表单。单击时的一个元素显示保存表单的div，然后表单的cancel按钮隐藏该div

我已经尝试了几个选项，但无法让它工作，所以我把它剥离，并把代码

包含的div显示但不会隐藏。。。有什么建议吗？

试试：

$("#h-nav li#hn-contact").click(function() {
    $(".dd").show();
});

但最好给那个div一个id并使用它。

试试：

$("#h-nav li#hn-contact").click(function() {
    $(".dd").show();
});

---

但是最好给那个div一个id并使用它。

从cancel处理程序返回false

否则，单击事件会冒泡，并且由于按钮嵌套在打开表单的

li

元素中，因此这两个元素都会收到单击

取消按钮尝试

隐藏它，然后
li
重新打开它

   $("#h-nav li#hn-contact #cancel").click(function() {
          $("#h-nav li#hn-contact").find("div.dd").hide();
           return false;
      });

演示


注意，由于
id
是唯一的，因此不必在jquery选择器中描述层次结构。只需使用最后一个
id
中的选择器，并从取消处理程序向前..
只需
返回false

否则，单击事件会冒泡，并且由于按钮嵌套在打开表单的
li
元素中，因此这两个元素都会收到单击

取消按钮尝试
隐藏它，然后
li
重新打开它

   $("#h-nav li#hn-contact #cancel").click(function() {
          $("#h-nav li#hn-contact").find("div.dd").hide();
           return false;
      });

演示


注意，由于
id
是唯一的，因此不必在jquery选择器中描述层次结构。只需使用上一个
id
中的选择器并向前..
这是由于事件冒泡。在click事件的回调中使用return false

$("#h-nav li#hn-contact #cancel").click(function() {
    $("#h-nav li#hn-contact").find("div.dd").hide();
    return false;
});

有关此主题的更多信息，请转到“以后处理javascript时值得了解的内容”

这实际上为您提供了停止传播的跨浏览器方式：

if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();

这是由于事件冒泡。在click事件的回调中使用return false

$("#h-nav li#hn-contact #cancel").click(function() {
    $("#h-nav li#hn-contact").find("div.dd").hide();
    return false;
});

有关此主题的更多信息，请转到“以后处理javascript时值得了解的内容”

这实际上为您提供了停止传播的跨浏览器方式：

if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();

我还建议使用toggle（）而不是show/hide，因为单击时不需要手动更改行为您不需要在单击时手动更改其行为，而只需显示/隐藏即可
感谢您的链接–这对于更好地了解事物总是很好的！感谢您的链接-总是很好，以获得更好的理解的事情！我最初使用的是切换，但在最终版本中，我将设置不透明度的动画，而不是显示和隐藏。“切换”不允许我获得想要的视觉效果。我最初使用的是“切换”，但在最终版本中，我将设置不透明度的动画，而不是显示和隐藏。切换不允许我得到想要的视觉效果。