位置：广州松河 > 技术支持 > jQuery 鼠标触发下拉菜单_js/jQuery

jQuery 鼠标触发下拉菜单_js/jQuery

来源：网络整理时间：2023/3/4 0:56:18 共 3637 浏览

之前写过一篇纯CSS实现鼠标触发下拉菜单的文章《纯CSS下拉展示（下拉菜单）》

今天再次分享下下拉菜单，实现的方式为：JS+jQuery

HTML：

<ul id="nav">
  <li>菜单1
   <ul>
    <li>子菜单1</li>
    <li>子菜单2</li>
    <li>子菜单3</li>
    <li>子菜单4</li>
   </ul>
  </li>
  <li>菜单2</li>
  <li>菜单3</li>
  <li>菜单4</li>
  <li>菜单5</li>
 </ul>

jQuery：

jQuery(function($) {
 $('#nav li').hover(function() {

  $('ul', this).slideDown(100)

 },
 function() {
  $('ul', this).slideUp(100)
 });
});

CSS：

*{margin: 0;padding: 0;}
 #nav{list-style: none;margin-left: 100px; margin-top: 100px;}
 #nav>li{float: left; margin-right: 6px;position: relative;}
 #nav>li ul{display: none; position: absolute;left: 0;top: 100%;width: 200px; list-style: none;}

在制作zblog模板的时候，几乎都需要预写下拉菜单，以方便主题用户自定义，之前写下拉的时候喜欢用纯CSS:hover的方式实现，但使用纯CSS也有弊端，比如安卓上、IOS上就不存在hover，所以以后的主题模板不得不在下拉菜单中使用jQuery，使用click点击的下拉方式实现。

版权说明：
本网站凡注明“广州松河原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：当前页面菜单高亮_js/jQuery | ·下一条：jQuery 导航菜单、广告 —— 固定、置顶、跟随_js/jQuery