• 网站首页
• 网站建设
• 短视频
• 网站推广
• 网站模板
• 客户案例
• 资讯动态
• 关于我们

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

当前位置：网站建设 > 技术支持

之前写过一篇纯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点击的下拉方式实现。

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