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 ++迁移到网络）一无所知。所以这是我的问题：可以更轻松，更简单（也许更正确）吗？如果有人能告诉我正确的道路，我将不胜感激。

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>

希望这对您有帮助！

Javascript双下拉菜单

1 个答案: