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

Question

我试图让表单显示和隐藏使用两个不同的触发器。单击时一个元素显示持有该窗体的div，然后窗体的取消按钮隐藏div。

我试过几个选项并不能得到这个工作，所以我已经剥离下来，并把代码here on jsfiddle (link)

包含div显示，但是随后将不会隐藏...有什么建议？

Answer 1

只是取消处理程序中的return false。

否则，点击事件会出现泡泡，并且由于按钮嵌套在打开表单的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

尝试：

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

但它会更好，给该分区的ID并使用它。

Answer 3

这是由于事件冒泡。在点击事件回调中使用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 4

我也建议使用切换（），而不是显示/隐藏的，那么你并不需要改变时，手动行为它被点击