创建多个折叠式的二级导航菜单，点击只打开当前导航栏内容

要创建多个折叠式的二级导航菜单，并且只打开当前导航栏内容，你需要使用 HTML、CSS 和 JavaScript。以下是一个实现该功能的示例代码：

HTML 代码：

<ul class="nav">
  <li>
    <a href="#">菜单 1</a>
    <ul>
      <li><a href="#">子菜单 1</a></li>
      <li><a href="#">子菜单 2</a></li>
      <li><a href="#">子菜单 3</a></li>
    </ul>
  </li>
  <li>
    <a href="#">菜单 2</a>
    <ul>
      <li><a href="#">子菜单 1</a></li>
      <li><a href="#">子菜单 2</a></li>
      <li><a href="#">子菜单 3</a></li>
    </ul>
  </li>
  <li>
    <a href="#">菜单 3</a>
    <ul>
      <li><a href="#">子菜单 1</a></li>
      <li><a href="#">子菜单 2</a></li>
      <li><a href="#">子菜单 3</a></li>
    </ul>
  </li>
</ul>

CSS 代码：

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

.nav li {
  position: relative;
}

.nav > li > a {
  display: block;
  padding: 10px;
  background-color: #f0f0f0;
  color: #333;
  text-decoration: none;
}

.nav > li > ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  padding: 0;
  margin: 0;
}

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

.nav > li > ul > li > a {
  display: block;
  padding: 10px;
  background-color: #fff;
  color: #333;
  text-decoration: none;
}

.nav > li > ul > li > a:hover {
  background-color: #f0f0f0;
}

JavaScript 代码：

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

navLinks.forEach(function(link) {
  link.addEventListener('click', function(e) {
    var currentNav = e.target.nextElementSibling;
    var siblingsNav = e.target.parentNode.parentNode.querySelectorAll('ul');

    siblingsNav.forEach(function(nav) {
      if (nav !== currentNav) {
        nav.style.display = 'none';
      }
    });

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

    e.preventDefault();
  });
});

这段 JavaScript 代码会监听所有导航链接的点击事件，并且根据当前导航链接的状态，打开或关闭对应的子导航菜单。同时，它会关闭其他所有子导航菜单，以保证每次只有一个子导航菜单处于打开状态。