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

Question

I am trying to make a menu that has many links and each link has its own sublist, this is what I am using我正在尝试制作一个有很多链接的菜单，每个链接都有自己的子列表，这就是我正在使用的

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

This is only for the users link to show its sublist.这仅用于用户链接以显示其子列表。 If i want to do the same with product, movies, and clips links do I have to copy and paste the function?如果我想对产品、电影和剪辑链接做同样的事情，我是否必须复制和粘贴该功能？ Can anyone here give me a example of a function so i don't have to copy paste?这里有人能给我一个函数的例子，这样我就不必复制粘贴了吗？

Thanks ;)谢谢 ;）

Answer 1

Honestly, I would use the Superfish plugin and not reinvent the wheel.老实说，我会使用Superfish插件而不是重新发明轮子。 Combine it with hoverIntent and it should be able to do everything you need.将它与hoverIntent结合起来，它应该能够做你需要的一切。

Answer 2

Thanks fo replie guys, i have used this function it is working it fades out my menu and also fadesIn the sub menu but the same sub menu for every link i want sub menu2 to fadeIn when i click the next link..感谢您的回复，我已经使用了这个功能，它正在工作，它会淡出我的菜单，也会淡出子菜单，但是当我单击下一个链接时，我希望子菜单 2 淡入的每个链接都有相同的子菜单。

Here is the link what i am doing http://umarstudio.com/test/html/screen_2b.htm这是我正在做的链接http://umarstudio.com/test/html/screen_2b.htm

I just need the submenus to fade In for every link.. Thanks ;)我只需要子菜单淡入每个链接..谢谢;)

Answer 3

Try something like this.尝试这样的事情。 Also, make sure your properly ending your nested tags另外，请确保正确结束嵌套标签

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

the script剧本

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

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

问题描述

3 个解决方案

解决方案1
1 2009-02-21 01:36:44

解决方案2
0

解决方案3
-1 2009-02-20 21:53:22

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

问题描述

3 个解决方案

解决方案1 1 2009-02-21 01:36:44

解决方案2 0

解决方案3 -1 2009-02-20 21:53:22

解决方案1
1 2009-02-21 01:36:44

解决方案2
0

解决方案3
-1 2009-02-20 21:53:22