jQuery ドロップダウンメニューを複数個作った際、すべてのメニューが開いてしまう

Question

前提・実現したいこと

レビュー一覧を表示するページで、レビューカードの右側に、「通報する」ボタンを表示するためのドロップダウンメニューを作りたいです。

発生している問題

例えば1番上のカードのメニューボタンをクリックしたときに、その下にあるすべてのカードでもメニューが開いてしまいます。

メニューボタンをクリックしたカードのみ、メニューが開くようにしたいです。

該当のソースコード

<div class="review-card">
      <div class="card-header">
        <div class="header-top">
          <a href="#"><img class="user-icon" src="#" alt="user-icon"></a>
          <a href="#"><p class="user-name">Aさん</p></a>
<!--  ここからドロップダウンメニュー  -->
          <div class="dropdown-wrap">
            <i class="fas fa-ellipsis-h"></i><!-- FontAwesomeを使用 -->
            <div class="dropdown-menu" style="display:none;">
              <ul class="dropdown-ul">
                <li><a href="" class="dropdown-text">通報する</a></li>
              </ul>
            </div>
          </div>
<!--  ここまで  -->
        </div>
        <div class="header-bottom">
          <div class="review-star">
            <div class="rating-star"><span style="width: 100%;" class="rating-star-r"></span></div>
          </div>
          <p class="updated-at">2020-08-01 17:38:17</p>
        </div>
      </div>
      <div class="card-body">
        <p class="review-content">すごくよかったです</p>
      </div>
    </div>

$(function(){
  $('.dropdown-wrap').click(function(){
      $('.dropdown-wrap').find('.dropdown-menu').toggle(0);
  });
  $('.dropdown-wrap,.dropdown-menu').hover(function(){
    over_flg = true;
  }, function(){
    over_flg = false;
  });
  $('body').click(function(){
    if (over_flg == false) {
      $('.dropdown-menu').hide(0);
    }
  });
});

教えていただきたいこと

メニューボタンをクリックしたカードでのみ、メニューが開くようにしたいのですが、どのようにすればいいでしょうか？

また、このような機能を「ドロップダウンメニュー」と呼ぶのは正しいのでしょうか？
検索で使いやすい、より適切な名称があれば教えていただけると嬉しいです。

Answer 1

こんばんは。

どのようにすればクリックした部品を指定できるのでしょうか？

イベントのthisを使うといいかもしれません。

     //$('.dropdown-wrap').find('.dropdown-menu').toggle(0);
     $(this).find('.dropdown-menu').toggle(0);

---

検索で使いやすい、より適切な名称があれば

アコーディオンメニューとかはどうでしょうか。
Accordion | jQuery UI

Comments

[teto277]

教えていただいたとおりthisを使って指定すると、その部品のメニューのみ開くようになりました。
すごく簡単なことでしたが、丁寧に教えていただいてありがとうございました。