在 Javascript 中选择第二个 div 时如何自动隐藏 div？

Question

我很难找出代码中的错误。当我调用函数 clean() 时，它会在不显示 <div> 的情况下清理屏幕。如果我调用函数 togglevisible() 它会显示我单击的 div，尽管在新元素上单击它不会隐藏第一个元素，但会取消隐藏第一个元素下方的第二个元素。单击 Javascript 中的新元素后如何隐藏元素？这是我使用 atm 的代码：

function clean() {
  if (previous_value !== null) {
    var hide = document.getElementById(previous_value);
    hide.style.display = "none";
  }
  togglevisible();
}

function togglevisible() {
  var dropdown = document.getElementById("dropdownCenterBtn");
  var current_value = dropdown.options[dropdown.selectedIndex].value;
  var previous_value = current_value;
  
  if (current_value !== null) {
    var selected = document.getElementById(current_value);
    selected.style.display = "flex";
  } else {
    var selected = document.getElementById(current_value);
    selected.style.display = "none";
  }
}

<div class="dropdown-center">
  <select class="dropdown-menu" id="dropdownCenterBtn" onchange="clean()">
    <option>Courses List</option>
    <option>------------</option>
    <option value="div1">Introduction to Computer Science</option>
    <option value="div2">Web Programming with Python and Javascript</option>
  </select>
</div>

<div class="div1" id="div1">
  <h3>Introduction</h3>
</div>

<div class="div2" id="div2">
  <h3>Web Programming</h3>
</div>

Answer 1

你走得太远了。这是一个快速解决方案。

function clean(event) 
{
  var divs = document.querySelectorAll(".div");
  
  divs.forEach(function (div){
    if(div.id === event.target.value && div.style.display == "none")
        div.style.display = "flex";
    else if(div.style.display !== "none")
        div.style.display = "none";
  });
}

<div class="dropdown-center">
  <select class="dropdown-menu" id="dropdownCenterBtn" onchange="clean(event)">
    <option>Courses List</option>
    <option>------------</option>
    <option value="div1">Introduction to Computer Science</option>
    <option value="div2">Web Programming with Python and Javascript</option>
  </select>
</div>

<div class="div1 div" id="div1">
  <h3>Introduction</h3>
</div>

<div class="div2 div" id="div2">
  <h3>Web Programming</h3>
</div>

在 Javascript 中选择第二个 div 时如何自动隐藏 div？

How do i auto hide a div when selecting a second div in Javascript?

javascript