如何淡入/淡出带有子菜单的 jQuery 菜单？答案

【问题标题】：How do I fade in/out a jQuery menu with sub menus?如何淡入/淡出带有子菜单的 jQuery 菜单？
【发布时间】：2009-02-20 21:37:31
【问题描述】：

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

$(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>

这仅用于用户链接显示其子列表。如果我想对产品、电影和剪辑链接执行相同操作，是否必须复制和粘贴该功能？谁能在这里给我一个函数的例子，这样我就不必复制粘贴了？

谢谢 ;)

【问题讨论】：

Bendewey 指出，您现有的 HTML 不正确。正确的标签顺序是：
users

【解决方案1】：

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

【讨论】：

【解决方案2】：

感谢回复的家伙，我已经使用了这个功能，它正在工作它淡出我的菜单，也淡入子菜单，但是当我点击下一个链接时，我希望子菜单 2 淡入的每个链接的相同子菜单..

这是我在做什么http://umarstudio.com/test/html/screen_2b.htm的链接

我只需要子菜单为每个链接淡入。谢谢 ;)

【讨论】：

【解决方案3】：

试试这样的。另外，请确保正确结束嵌套标签

<body>
<ul id="products" class="menu">
<li><a href="#">users</a>
    <ul class="sub_menu'>
        <li><a href="#">user 1</a></li>
        <li><a href="#">user 1</a></li>
        <li><a href="#">user 1</a></li>
    </ul>
</li>
<li><a href="#">product</a>
    <ul class="sub_menu'>
        <li><a href="#">product 1</a></li>
        <li><a href="#">product 1</a></li>
        <li><a href="#">product 1</a></li>
    </ul>
</li>
<li><a href="#">movies</a></li>
<li><a href="#">clips</a></li>
<li><a href="#">teaser</a></li>
<li><a href="#">trailer</a></li>
<li><a href="#">HDMovie</a></li>
</ul>

</body>

脚本

$(document).ready(function(){
    $(".menu > li > a").bind("click", function(){
        $('.sub_menu').fadeOut();
        $(this).parent().find('.sub_menu').fadeIn();
    }
})

【讨论】：

嗨，谢谢你的回复，我已经使用了这个功能，它正在工作它会淡出我的菜单并且也会淡入子菜单，但是当我点击时，我希望子菜单 2 淡入的每个链接都有相同的子菜单下一个链接..谢谢大家...
我只需要子菜单为每个链接淡入。谢谢 ;)