Javascript双下拉菜单

我目前正在尝试使用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";
  }
}

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）。所以我的问题是：能不能更简单、更简单（也许更正确）？如果有人能告诉我正确的路径，我将非常感激。

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

功能切换（el）{
if（el.childNodes[1].className===‘消失’）{
el.childNodes[1].classList.remove（'消失'）；
}否则{
el.childNodes[1].classList.add（'消失'）；
}
}

。消失{
显示：无；
}
李：悬停{
颜色：红色
}

首先

一,
二,


秒

一,
二,

问题很好，但您可以帮我们一个忙，使用堆栈片段（编辑器工具栏上的按钮看起来像

），并将代码放入适当的框中（CSS应该没有

标记，JS没有

）。这样我们就可以在这里试一试，而不必导航到其他网站。@HereticMonkey我为他做了这件事：）@Archer你真是太好了；我喜欢为新人创造机会，让他们自己学习如何使用它：）@HereticMonkey现在他看到了一个可以做什么的例子，我相信他已经学会了。这就是为什么我们可以编辑人们的问题：）@Archer谢谢你的帮助！这是一个有趣的方法，我将尝试实现它。谢谢没问题，我自己也喜欢看别人如何实施，并选择最佳解决方案；）

<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>