プルダウンで出てきて、領域外クリックで閉じる、これのテンプレを作りたいです。<select><option>を使わずに。

Question

前提・実現したいこと

ボタンを押すと、プルダウンでカードやリストが出てくるような、テンプレを作りたいです。

HTMLの<select><option>みたいに、クリックすると出てくる・領域外タップでも閉じるようなイメージです。
クリックするところや出てくるものが、<select><option>形式に限らないため、HTMLとjQueryで作れないかなと思っております。

試したこと

<main>
  <div class="info1">お知らせ1</div>
  <div class="info2">お知らせ2</div>
</main>

<div class="_card">
  //～お知らせ1　内容～
</div>
<div class="info1_card">
  //～お知らせ2　内容～
</div>

[class$="_card"]{ display: none;}

試したこと

１か所なら以下でできるのですが。
これが画面のいろんなところでいくつも同じ挙動でつかいたいので、
毎度クラスを個別につけるのもどうなのかと悩んでおります。

$(document).on('click', function(e) {
  if(!$(e.target).closest('.info1_card').length && !$(e.target).closest('.info1').length){
    $('.info1_card').hide();
  }else if($(e.target).closest('.account').length){
    if($('.info1_card').is(':hidden')){
      $('.info1_card').show();
    }else{
      $('.info1_card').hide();
    }
  }
});

補足

infoの子孫要素に_cardを入れて、クラス付与でやればよいのでは？と思われるかもですが、
事情でHTMLは<main>内にトリガーボタン、外に非表示要素_cardなどを置くことになっています。

お知恵をお貸しください。
どうぞよろしくお願いします。

Comments

[yambejp]

> テンプレを作りたい

の意図が分かりません
それとクラスやカスタムdataは自由につけていいのでしょうか？

Answer 1

<style>
[class$="_card"]:not(.active){ display: none;}
</style>
<script>
document.addEventListener('click',e=>{
  const t=e.target;
  document.querySelector('.active')?.classList.remove('active');
  if(t.dataset.target){
    document.querySelector(t.dataset.target).classList.add('active');
  }
});
</script>
<main>
  <div data-target="[data-id=hoge]">お知らせ1</div>
  <div data-target="[data-id=fuga]">お知らせ2</div>
  <div data-target="[data-id=piyo]">お知らせ3</div>
</main>

<div class="hoge_card" data-id="hoge">
～お知らせ1　内容～
</div>
<div class="fuga_card" data-id="fuga">
～お知らせ2　内容～
</div>
<div class="piyo_card" data-id="piyo">
～お知らせ3　内容～
</div>

Comments

[Louie]

ありがとうございました。