jquery第三章练习三（制作京东常见问题分类页面）

最新推荐文章于 2022-11-11 19:58:14 发布

长河落日#

最新推荐文章于 2022-11-11 19:58:14 发布

阅读量7.8k

点赞数 7

分类专栏：作业练习文章标签： jquery

本文链接：https://blog.youkuaiyun.com/weixin_47065927/article/details/108097919

版权

作业练习专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的下拉菜单动画效果。通过hover和click事件，菜单会在鼠标悬停时以慢速显示，在鼠标离开时快速隐藏，同时通过计数器控制菜单的展开与收起。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js代码及要求如下：

$(document).ready(function () {
  /* 鼠标移至“联系客服”，二级菜单以”slow“速度显示；当鼠标离开时，二
级菜单以“fast”速度隐藏 */
  $(".menu-btn").hover(
    function () {
      $(this).next().show("slow");
    },
    function () {
      $(this).next().hide("fast");
    }
  );

  /*  鼠标一级菜单时，使用 slideDown( ) 实现二级菜单以“slow”速度显示；
当鼠标再次单击一级菜单时，使用 slideUp( ) 实现二级菜单以”slow“速度隐
藏 */

  let count = 0;
  $(".nav dt").click(function () {
    count++;
    if (count % 2 !== 0) $(this).nextAll().slideDown("slow");
    else {
      $(this).nextAll().slideUp("slow");
    }
  });
});

效果如下：
在这里插入图片描述