jQuery单击显示/隐藏使用2个单独的元素问题

Question

我正在尝试使用两个不同的触发器来显示和隐藏表单。单击一个元素显示持有表单的div，然后表单的取消按钮隐藏div。

我已经尝试了几个选项但无法使其工作，所以我将其剥离并放入代码here on jsfiddle (link)

包含div显示但不会隐藏......有任何建议吗？

Answer 1

取消处理程序中的return false。

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

取消按钮尝试hide它，然后li重新打开它..

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

演示http://jsfiddle.net/gaby/5CpeW/2/

---

注意，由于id是唯一的，因此您不必在jquery选择器中描述层次结构。只需使用上一个id中的选择器并转发..

Answer 2

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

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

有关此主题的更多信息，请转到Events Order当您将来要处理javascript时，值得了解。

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

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

Answer 3

尝试：

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

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

Answer 4

我还建议使用toggle（）而不是show / hide，因为当你点击它时你不需要改变手动行为