jQuery 2つの要素を使用して表示/非表示を切り替える問題

Question

2つの異なるトリガーを使用して表示および非表示にするフォームを取得しようとしています。 1つの要素がクリックされると、フォームを保持するdivが表示され、フォームのキャンセルボタンがdivを非表示にします。

私はいくつかのオプションを試してみたし、これが仕事を得ることができないので、私はそれを剥ぎ取り、here on jsfiddle (link)

含むdivのショーのコードを入れてきましたが、その後...任意の提案を隠していないのだろうか？

Answer 1

キャンセルハンドラのちょうどreturn false

それ以外の場合は、クリックイベントがバブルし、ボタンがフォームを開く要素li内にネストされているため、両方の要素がクリックを受け取ります。

がidがユニークであることから、これを行わない、http://jsfiddle.net/gaby/5CpeW/2/

---

お知らせでデモ

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

...ボタンがそれをhideしようとすると、その後liそれを再オープンしますキャンセルjqueryセレクタの階層を記述する必要があります。最後のidのセレクタを使用して転送してください。

Answer 2

試してみてください。

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

しかし、それはIDをDIV与え、それを使用する方が良いでしょう。

Answer 3

これはイベントのバブリングによるものです。クリックイベントのコールバックではfalseを使用します。このテーマの詳細については

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

、あなたが将来的にはJavaScriptを扱うことになるだろうときには、理解する価値がEvents Orderに行きます。実際にあなたのストーピングの伝播のクロスブラウザの方法を提供します

：

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

Answer 4

私も（トグルを使用することをお勧めし）ではなく、ショー/として、あなたは時に手動での動作を変更する必要はありません隠しますそれはクリックされました