javascript - 具有多级下拉菜单的最简单的 JQuery 动画导航栏

Question

我正在为网站创建一个导航栏，我需要一种非常简单的方法来创建从主栏到下拉列表的 2 个级别的下拉列表，以及进一步的下拉级别。

我正在使用没有额外插件的 JQuery。

“最简单”是指最少的代码行和最少的变量，因此加载时间最快。

我试过使用 hover() 事件，但这似乎不起作用。

这是一个 HTML 示例:

<div class="menu">
   <ul>
       <li><a href="#">Link 1</a></li>
       <li><a href="#">Link 2</a>
           <ul class="sub">
               <li><a href="#">Sub 1</a>
                   <ul class="sub2">
                       <li><a href="#">Sub 2</a></li>
                   </ul>
               </li>
           </ul>
       </li>
   </ul>
</div>

理想情况下，将鼠标悬停在“链接 2”上会使子列表向下滑动，将鼠标悬停在“子 1”上会使子列表在其旁边向下滑动。

此外，我对大多数维度都使用百分比，因此如果以相同的方式缩放它会非常有用。

如果需要更多信息，请在投票前询问。

谢谢。

Answer 1

最好的 jQuery 不是 jQuery。

.menu input {
  position: absolute;
  left: -9999px;
}
.menu label {
  cursor: pointer;
  display: block;
}
.menu label:after {
  content: '...';
}
.sub {
  display: none;
}
.menu label:hover+input+.sub,
.menu input:checked+.sub,
.sub:hover {
  display: block;
}

<div class="menu">
   <ul>
       <li><a href="#">Link 1</a></li>
       <li>
           <label for="menu-2">Link 2</label>
           <input type="checkbox" id="menu-2" />
           <ul class="sub">
               <li>
                   <label for="menu-2-1">Sub 1</label>
                   <input type="checkbox" id="menu-2-1" />
                   <ul class="sub">
                       <li><a href="#">Sub 2</a></li>
                   </ul>
               </li>
           </ul>
       </li>
   </ul>
</div>

根据需要添加更多 CSS。