如果我有隐藏的元素（下拉列表），它们在单击父元素时打开，那么如何通过单击另一个父元素来关闭它们？这是我在js中的代码
```javascript
function toggleElement(elementId) {
  var element = document.querySelector(elementId);
  element.style.display = element.style.display === "none" ? "block" : "none";
}
document.addEventListener("DOMContentLoaded", function() {
  var buttons = document.getElementsByClassName("ContainerForMenu");
  for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener("click", function() {
      var target = this.getAttribute("data-target");
      toggleElement(target);
    });
  }
});

function toggleElement(elementId) {
  var elements = document.querySelectorAll('.child-element');
  
  for (var i = 0; i < elements.length; i++) {
    elements[i].style.display = "none";
  }
  
  var element = document.querySelector(elementId);
  element.style.display = "block";
}
document.addEventListener("DOMContentLoaded", function() {
  var buttons = document.getElementsByClassName("ContainerForMenu");
  
  for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener("click", function() {
      var target = this.getAttribute("data-target");
      toggleElement(target);
    });
  }
});

<details>
<summary>英文:</summary>
if I have hidden elements (dropdown list) that open on click on the parent element, how can I close them by clicking on another parent element in this case? here is the code i have in js

as a solution i tried this option but it doesn't work

</details>
# 答案1
**得分**: 1
跟随我的代码，您可以使用切换按钮来根据按钮点击来切换元素的可见性...
```javascript
function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

#myDIV {
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color: lightblue;
  margin-top: 20px;
}

<button onclick="myFunction()">试一试</button>
<div id="myDIV">
  这是我的DIV元素。
</div>