渲染2个导航栏

<div class="navbar">
  <ul class="navbar-list">
    <li><a href="#">导航项1</a></li>
    <li><a href="#">导航项2</a></li>
    <li><a href="#">导航项3</a></li>
  </ul>
</div>

<div class="navbar">
  <ul class="navbar-list">
    <li><a href="#">导航项4</a></li>
    <li><a href="#">导航项5</a></li>
    <li><a href="#">导航项6</a></li>
  </ul>
</div>

.navbar {
  background-color: #f2f2f2;
  padding: 10px;
}

.navbar-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.navbar-list li {
  display: inline-block;
  margin-right: 10px;
}

.navbar-list li a {
  text-decoration: none;
  color: #333;
}

var navbar1 = document.getElementsByClassName("navbar")[0];
var navbar2 = document.getElementsByClassName("navbar")[1];
var button = document.getElementById("toggleButton");

button.addEventListener("click", function() {
  if (navbar1.style.display === "none") {
    navbar1.style.display = "block";
    navbar2.style.display = "none";
  } else {
    navbar1.style.display = "none";
    navbar2.style.display = "block";
  }
});