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

我也建議使用切換（），而不是顯示/隱藏的，那麼你並不需要改變時，手動行爲它被點擊