javascript - 如何淡入/淡出带有子菜单的 jQuery 菜单？

Question

我正在尝试制作一个有很多链接的菜单，每个链接都有自己的子列表，这就是我正在使用的

$(document).ready(function() {
  $(".users").bind("click", function() {
    $('#menu').fadeOut();
    $('#sub_menu').fadeIn();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div id="menu">
  <a href="#">
    <li>users <br /></a>
  </li>
  <a href="#">
    <li>product <br /></a>
  </li>
  <a href="#">
    <li>movies <br /></a>
  </li>
  <a href="#">
    <li>clips <br /></a>
  </li>
  <a href="#">
    <li>teaser <br /></a>
  </li>
  <a href="#">
    <li>trailer <br /></a>
  </li>
  <a href="#">
    <li>HDMovie <br /></a>
  </li>
</div>

这仅供用户链接显示其子列表。如果我想对产品、电影和剪辑链接做同样的事情，我是否必须复制和粘贴该功能？任何人都可以给我一个函数示例，这样我就不必复制粘贴了吗？

谢谢;)

Answer 1

老实说，我会使用 Superfish插件而不是重新发明轮子。结合 hoverIntent它应该能够完成您需要的一切。