[jQuery] addClass,toggleClass による開閉ボタン

Question

jQueryを使ってクリック開閉式のUIを作りたいのですが、要件が少し特殊なため行き詰まってしまいました。

• .open クラスの付け外しによって開閉を実現したい
• 開閉する要素内のどこをクリックしても.openが付与される
• 閉じる際は、その子要素である小さいボタンのみ反応する

該当箇所のコードは、

<div class="product-ask">
  ...
  <div class="pin">...</div>
</div>

$('.product-ask').click(function(){
  $(this).addClass('open');
});
$('.product-ask>.pin').click(function(){
  $(this).parent().toggleClass('open');
});

ここで

• 最初の .open クラス付与は問題なく動作するが、
• 閉じる際に div.pin 要素をクリックしても .open クラスが除去されない

といった問題に直面しております。

ブラウザの Developer tools で確認する限りDOM操作は行われているようです。
どうやら div.pin 要素をクリックした際に div.product-ask の addClass と div.pin の toggleClass が重複して実行されている（それも addClass が後）のではないかと推測しております。

冒頭に示しました要件をクリアする形で、何かしらアドバイスや参考資料をいただけますと幸いです。
どうぞよろしくお願いいたします。

Answer 1

早速ですが、jQueryのコードを以下のように変えることで自己解決いたしました。

$('.product-ask').click(function(f){
  if($(f.target).hasClass('pin')){
    $(this).toggleClass('open');
  } else {
    $(this).addClass('open');
  }  
});

なおこの解決方法は 要素のクリックイベントで一部だけ別の動作をさせたいとき を参考にさせていただきました。
ありがとうございました。