JavaScript 双下拉菜单

Question

我目前正在尝试使用 JavaScript 和 HTML 列表创建双下拉菜单。我知道互联网上有很多相关内容，但这些解决方案不适合我，也不适合使用 jQuery(我这样做主要是为了 JavaScript 练习)。我创建了类似的东西:

JS 代码:

function clear_id() {
  document.getElementById("first").style.display = "none";
  document.getElementById("second").style.display = "none";
}

function dropdown_id(id) {
  var element = document.getElementById(id);
  if (element.style.display === "block") {
    element.style.display = "none";
  } else {
    clear_id();
    element.style.display = "block";
  }
}

function clear_class(element) {
  for (var i = 0; i < element.length; ++i) {
    element[i].style.display = "none";
  }
}

function dropdown_class(id, num) {
  var element = document.getElementsByClassName(id);
  if (element[num].style.display === "block") {
    element[num].style.display = "none";
  } else {
    clear_class(element);
    element[num].style.display = "block";
  }
}

CSS 代码:

ol,
ul {
  display: none;
}

#main {
  display: block;
}

li {
  list-style-type: none;
}

HTML 代码:

<ol id="main">
  <li>
    <a href="#" onclick="dropdown_id('first')">First</a>
    <ul id="first">
      <li>
        <a href="#" onclick="dropdown_class('one',0)">fir</a>
        <ol class="one">
          <li><a href="#">f</a></li>
          <li><a href="#">s</a></li>
        </ol>
      </li>
      <li>
        <a href="#" onclick="dropdown_class('one',1)">sec</a>
        <ol class="one">
          <li><a href="#">f</a></li>
          <li><a href="#">s</a></li>
        </ol>
      </li>
    </ul>
  </li>
  <li>
    <a href="#" onclick="dropdown_id('second')">Second</a>
    <ul id="second">
      <li><a href="#" onclick="dropdown_class('two',0)">fir</a>
        <ol class="two">
          <li><a href="#">f</a></li>
          <li><a href="#">s</a></li>
        </ol>
      </li>
      <li>
        <a href="#" onclick="dropdown_class('two',1)">sec</a>
        <ol class="two">
          <li><a href="#">f</a></li>
          <li><a href="#">s</a></li>
        </ol>
      </li>
    </ul>
  </li>
</ol>

所以此时，我只需在单击后展开并滚动(取决于显示状态)。这是我针对该问题的解决方案。

它工作得很好，但我觉得它可以做得更简单，只是我对 JavaScript 的了解不够好，而且我被我的 C++ 方法所阻碍(最近因为好奇而从 C++ 转移到 Web)。所以这是我的问题:它可以做得更容易和更简单(也许更正确)吗？如果有人能告诉我正确的道路，我将非常感激。

Answer 1

这是另一个实现，我使用 this 关键字传入 DOM 元素，然后在我的 javascript 函数中使用它。它也比您的解决方案短一点，但不一定更好。

function toggle (el) {
  if (el.childNodes[1].className === 'disappear') {
    el.childNodes[1].classList.remove('disappear');
  } else {
    el.childNodes[1].classList.add('disappear');
  }
}

.disappear {
  display: none;
}

li:hover{
color:red
}

<ul>
      <li onclick="toggle(this);">first
        <ul class="disappear">
          <li>1</li>
          <li>2</li>
        </ul>
      </li>
      <li onclick="toggle(this);">second
        <ul class="disappear">
          <li>1</li>
          <li>2</li>
        </ul>
      </li>
    </ul>

希望这对您有帮助!