我可以用javascript或jquery实现以下功能吗?我有多个按钮，点击后，我想显示一个div，但关闭前一个

Question

我在一个部分中有几个按钮，我想点击它们，并让每个按钮显示各自的div ID(本质上是三个博客的一部分，特定于按下的按钮(，但我想不通的是。。。。

单击时，我如何单击另一个按钮来显示相应的div，但关闭之前单击的另一个div？

我尝试了以下方法：

<script> function toggle(e){
const button = e.target;
const divId = button.dataset.targetId;
const div = document.getElementById(divId);
if(div.classList.contains("hidden")){
div.classList.remove("hidden");
div.classList.add("show")
}
else{
div.classList.remove("show");
div.classList.add("hidden")
}
}
</script>

我在单击按钮时需要显示的所有div部分都附加了一个隐藏类。

即，我的一个按钮的代码是：

<button data-target-id="Toilet-Repair-Articles" onclick="toggle(event)" class="white-transparent-button-white-rollover">Toilet is Running</button>

Answer 1

这个例子怎么样？

(请参阅代码中的注释以获得一些澄清。(

const containerDiv = document.querySelector("#container-div");
containerDiv.addEventListener('click', showRow); // Uses event delegation
function showRow(event){
const clicked = event.target;
if(clicked.tagName != 'BUTTON'){ return; } // Ignores irrelevant clicks
for(row of containerDiv.children){
const display = row.querySelector(".display");
if(row == clicked.parentElement){
display.classList.remove("hidden"); // Shows only corresponding display
}
else{
display.classList.add("hidden");
}
}
}

/* CSS rules other than `.hidden` are just for this demo  */
#container-div{ margin: 1em; }
.row{ width: 10em; height: 1.4em; margin-bottom: 1em; padding: 0.2em; border: 1px solid lightgrey; }
.display{ display: inline-block; }
button{ float: right; }
.hidden{ display: none; }

<div id="container-div">
<div class="row">
<div class="display">AAAAA</div>
<button>SHOW</button>
</div>
<div class="row">
<div class="display hidden">BBBBB</div>
<button>SHOW</button>
</div>
<div class="row">
<div class="display hidden">CCCCC</div>
<button>SHOW</button>
</div>
<div class="row">
<div class="display hidden">DDDDD</div>
<button>SHOW</button>
</div>
</div>