问题

Sure, here is the translated code:

如果我有隐藏的元素（下拉列表），它们在单击父元素时打开，那么如何通过单击另一个父元素来关闭它们？这是我在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

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);
});
}
});

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

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>


# 答案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>

这是您要翻译的内容。

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()">Try it</button>

<div id="myDIV">
This is my DIV element.
</div>