JS中用三种方式实现导航菜单中的二级下拉菜单

以下是JS中用三种方式实现导航菜单中的二级下拉菜单的完整攻略：

1. 通过CSS实现菜单的基本样式

在HTML代码中定义导航菜单的基本结构和CSS样式，可以使用hover伪类实现鼠标滑过菜单项时菜单的展示和隐藏效果。示例代码如下：

<ul class="menu">
  <li><a href="#">Menu Item 1</a>
    <ul>
      <li><a href="#">Submenu Item 1-1</a></li>
      <li><a href="#">Submenu Item 1-2</a></li>
    </ul>
  </li>
  <li><a href="#">Menu Item 2</a>
    <ul>
      <li><a href="#">Submenu Item 2-1</a></li>
      <li><a href="#">Submenu Item 2-2</a></li>
    </ul>
  </li>
</ul>

<style>
.menu ul {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
}
.menu li:hover > ul {
  display: block;
}
</style>

具体实现效果可查看Codepen：https://codepen.io/rookiecoder2018/pen/QWvJXaJ

2. 通过JavaScript实现菜单的展开和收起

通过JavaScript代码动态控制菜单的展开和收起，可以在HTML代码中添加点击事件。示例代码如下：

<ul class="menu">
  <li><a href="#">Menu Item 1</a>
    <ul>
      <li><a href="#">Submenu Item 1-1</a></li>
      <li><a href="#">Submenu Item 1-2</a></li>
    </ul>
  </li>
  <li><a href="#">Menu Item 2</a>
    <ul>
      <li><a href="#">Submenu Item 2-1</a></li>
      <li><a href="#">Submenu Item 2-2</a></li>
    </ul>
  </li>
</ul>

<script>
var menuItems = document.querySelectorAll('.menu > li');
for (var i = 0; i < menuItems.length; i++) {
  menuItems[i].addEventListener('click', function() {
    var subMenu = this.querySelector('ul');
    subMenu.classList.toggle('open');
  });
}
</script>

<style>
.menu ul {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
}
.menu ul.open {
  display: block;
}
</style>

具体实现效果可查看Codepen：https://codepen.io/rookiecoder2018/pen/YzWEXzR

3. 通过第三方库实现菜单的交互效果

通过使用第三方库，可以快速实现复杂的交互效果，比如菜单的滑动、渐变等动画。比较常用的第三方库有jQuery、Bootstrap、Foundation等。示例代码如下：

<ul class="dropdown-menu">
  <li><a href="#">Dropdown Item 1</a></li>
  <li><a href="#">Dropdown Item 2</a></li>
  <li class="dropdown-submenu">
    <a href="#">Dropdown Item 3</a>
    <ul class="dropdown-menu">
      <li><a href="#">Submenu Item 3-1</a></li>
      <li><a href="#">Submenu Item 3-2</a></li>
    </ul>
  </li>
  <li class="dropdown-submenu">
    <a href="#">Dropdown Item 4</a>
    <ul class="dropdown-menu">
      <li><a href="#">Submenu Item 4-1</a></li>
      <li><a href="#">Submenu Item 4-2</a></li>
    </ul>
  </li>
</ul>

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<script>
$('.dropdown-submenu > a').on("click", function(e){
  var submenu = $(this).next('ul');
  if (submenu.is(':visible')) {
    submenu.hide();
  } else {
    submenu.show();
  }
  e.stopPropagation();
  e.preventDefault();
});
</script>

具体实现效果可查看Codepen：https://codepen.io/rookiecoder2018/pen/dydbZay

综上所述，以上三种方式实现导航菜单中的二级下拉菜单均有其优点和缺点，可以根据实际需求和喜好进行选择。