button押下で同列のドロップダウンリストを開いた状態にしたい【javascript】【bootstrap】

Question

HTML上のテーブルの1行に左端にボタンがあり、これを押すことで右方向にあるドロップダウンリストを開いた状態にしたいと思います。何行もあり、forで回しての処理中の話となります。

<td class="align-middle"><button class="btn btn-light" value="1" onclick="sentaku(this)">ア行</button></td>
<td class="align-middle">
						<div class="dropdown">
							<button class="btn btn-secondary dropdown-toggle" id="gender" type="button" data-toggle="dropdown">
								異常なし
							</button>
							<div class="dropdown-menu">
								<button class="dropdown-item" value="">あいうえお</button>
								<button class="dropdown-item" value="">かきくけこ</button>
								<button class="dropdown-item" value="">さしすせそ</button>

							</div>
						</div>
					</td>

bootstrapのクラスでshowを追加で表示自体はされるのですが、選択肢を押した後リストが表示され続けて消えてくれません。

function sentaku(obj){
		console.log(obj.closest('tr'));
		let DropMenu = obj.closest('tr').querySelector('.dropdown');
		DropMenu.classList.add('show');
		let DropMenu1 = obj.closest('tr').querySelector('.dropdown-menu');
		DropMenu1.classList.add('show');
	}

aria-expanded="false"の項目もtrueにしようとしたのですがよくわからないエラーが出て困っています。
考え方に間違えがあるのか、正しいやり方はどんなものがあるか教えてもらえないでしょうか。

加筆します。
id="gender"のbuttonを押下することで<div class="dropdown">と<div class="dropdown-menu">のクラスにshowが付き、<div class="dropdown-menu">内の項目が表示されます。これを選択することでid="gender"のbuttonの文字列が選択した文字列に置き換えられます。
これ自体はbootstrapの参考記述をまねて書きましたので、細かく説明ができません、申し訳ありません。

Comments

[yambejp]

ドロップダウンリストとは「.dropdown-menu」の要素のことでしょうか？
divなので開いた状態というのがよくわかりませんが、説明してもらえますか？

[m.ts10806]

>bootstrapの参考記述をまねて書きましたので

参考先URL提示してください。
大抵のことは自前でしなくても機能でなんとかできるはずなので

[kihokutarou]

https://www.tohoho-web.com/bootstrap/dropdown.html

こちらを参考にさせていただきました。
要するにこちらのボタンの押下ではなく、第3の要素クリックで当該のドロップダウンリストを表示状態にさせたいわけです。

Answer 1

こういうことでしょうか？（相対位置を利用しているのでHTMLの構造が違うなら動かないですが）

<style>
.dropdown-menu{
display:flex;
flex-direction:column;
width:100px;
}
.dropdown-menu:not(.show){
display:none;
}
.dropdown-item{
width:auto;
}
</style>
<script>
document.addEventListener('click',e=>{
  const t=e.target;
  if(t.closest('.dropdown-toggle')){
    t.nextElementSibling.classList.add('show');
  }
  if(t.closest('.dropdown-item')){
    t.closest('.dropdown-menu').previousElementSibling.textContent=t.textContent;
    t.closest('.dropdown-menu').classList.remove('show');
  }
})
</script>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
異常なし
</button>
<div class="dropdown-menu">
<button class="dropdown-item" value="">あいうえお</button>
<button class="dropdown-item" value="">かきくけこ</button>
<button class="dropdown-item" value="">さしすせそ</button>
</div>
</div>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
異常なし
</button>
<div class="dropdown-menu">
<button class="dropdown-item" value="">あいうえお</button>
<button class="dropdown-item" value="">かきくけこ</button>
<button class="dropdown-item" value="">さしすせそ</button>
</div>
</div>