嵌套导航反应原生 - Javascript

简介

嵌套导航是现代 Web 应用非常重要的一部分，可以帮助用户以有条理的方式组织和浏览大量的内容。在本文中，我们将介绍使用 Javascript 创建嵌套导航的方法，其中包括如何处理反应原生。

如何创建嵌套导航

要创建嵌套导航，我们需要一个 HTML 和 CSS 模板，以及一些 Javascript 代码。

HTML 模板

HTML 模板是描述嵌套导航结构的基础。在我们的示例中，我们将使用以下 HTML 和 CSS：

<div class="nav">
  <ul>
    <li>
      <a href="#">Item 1</a>
      <ul>
        <li><a href="#">Sub-item 1.1</a></li>
        <li><a href="#">Sub-item 1.2</a></li>
        <li><a href="#">Sub-item 1.3</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Item 2</a>
      <ul>
        <li><a href="#">Sub-item 2.1</a></li>
        <li><a href="#">Sub-item 2.2</a></li>
        <li><a href="#">Sub-item 2.3</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Item 3</a>
      <ul>
        <li><a href="#">Sub-item 3.1</a></li>
        <li><a href="#">Sub-item 3.2</a></li>
        <li><a href="#">Sub-item 3.3</a></li>
      </ul>
    </li>
  </ul>
</div>

.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav ul ul {
  display: none;
}

.nav ul li:hover > ul {
  display: block;
}

.nav ul li a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #444;
  font-size: 16px;
}

.nav ul ul li a {
  padding: 5px;
  font-size: 14px;
}

Javascript 代码

要处理嵌套导航的反应原生，我们需要添加事件监听器。在我们的示例中，我们将使用以下 Javascript 代码：

var nav = document.querySelector('.nav');
var links = nav.querySelectorAll('a');

[].forEach.call(links, function(link) {
  link.addEventListener('click', function(e) {
    var ul = this.parentNode.querySelector('ul');

    if (ul) {
      e.preventDefault();

      if (ul.style.display === 'block') {
        ul.style.display = 'none';
      } else {
        ul.style.display = 'block';
      }
    }
  });
});

结论

在本文中，我们介绍了如何使用 Javascript 创建嵌套导航，并处理反应原生。希望这个算法可以帮助你构建更好的 Web 应用。