jQuery的9种方式实现下拉列表

利用基本动画、滑动动画、淡入淡出、自定义动画和事件实现下拉列表框。我只是将所学的知识统统实现了一遍，但是如果加上排列和组合不止这九种。（这么神奇，又在吹牛吧。）附代码如下

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>* {margin: 0;padding: 0;}ul {list-style: none;}.wrap {width: 330px;height: 30px;margin: 100px auto 0;background-image: url(bg.jpg);padding-left: 15px;}.wrap li {float: left;width: 100px;height: 30px;margin-right: 10px;position: relative;}.wrap a {color: black;text-decoration: none;display: block;width: 100px;height: 30px;text-align: center;line-height: 30px;background-image: url(libg.jpg);}.wrap li ul {position: absolute;display: none;}</style><script type="text/javascript" src="../../../js/jquery-1.11.1.min.js"></script><script>$(document).ready(function() {
//              // 方式一
//              $(".wrap li").mouseenter(function() {
//                  $(this).children("ul").show();
//              });
//              $(".wrap li").mouseleave(function() {
//                  $(this).children("ul").hide();
//              });
//
//              // 方式二
//              $(".wrap li").hover(function() {
//                  $(this).children("ul").show();
//              }, function() {
//                  $(this).children("ul").hide();
//              });
//              // 方式三
//              $(".wrap li").hover(function() {
//                  /!*alert("1");*!/
//                  var $this = $(this).children("ul");
//                  var isShow = $this.css("display");
//                  if (isShow === "block") {
//                      $this.hide();
//                  } else {
//                      $this.show();
//                  }
//              });
//              // 方式四
//              $(".wrap li").hover(function() {
//                  $(this).children("ul").slideToggle();
//              })
//          });
//          // 方式五
//          $(".wrap li").mouseenter(function() {
//              $(this).children("ul").slideDown();
//          });
//          $(".wrap li").mouseleave(function() {
//          $(this).children("ul").slideUp();
//          });// 方式六
//          $(".wrap li").mouseenter(function() {
//              $(this).children("ul").fadeIn(1000);
//          });
//          $(".wrap li").mouseleave(function() {
//          $(this).children("ul").fadeOut(1000);
//          });// 方式七
//          $(".wrap li").hover(function(){
//              $(this).children("ul").fadeToggle();
//          })// 方式八$(".wrap li").mouseenter(function(){$(this).animate({left:0},"fast",function(){$(this).children("ul").show();});});$(".wrap li").mouseleave(function(){$(this).animate({left:0},"fast",function(){$(this).children("ul").hide();});});// 方式九 事件
//          $(".wrap").on("mouseenter","li",function(){
//              console.log($(this))
//              $(this).children("ul").show();
//          });
//          $(".wrap").on("mouseleave","li",function(){
//              $(this).children("ul").hide();
//          });});</script></head><body><div class="wrap"><ul><li><a href="#">一级菜单1</a><ul><li><a href="#">二级菜单1</a></li><li><a href="#">二级菜单2</a></li><li><a href="#">二级菜单3</a></li></ul></li><li><a href="#">一级菜单1</a><ul><li><a href="#">二级菜单1</a></li><li><a href="#">二级菜单2</a></li><li><a href="#">二级菜单3</a></li></ul></li><li><a href="#">一级菜单1</a><ul><li><a href="#">二级菜单1</a></li><li><a href="#">二级菜单2</a></li><li><a href="#">二级菜单3</a></li></ul></li></ul></div></body></html>

效果如下：

jQuery的9种方式实现下拉列表相关推荐

通过CDN引入jQuery的几种方式
百度 CDN <head><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" ...
jQuery zTree几种常用的使用方式
最近在用这个ztree进行项目中的某些功能的开发.所以这里就随笔记录一下.顺便为我那菜的无地自容地JavaScript做点笔记. 什么是 ZTree 官方简介: zTree 是一个依靠 jQuery ...
jquery调用click事件的三种方式
第一种方式: $(document).ready(function(){$("#clickme").click(function(){alert("Hello World ...
利用jquery的qrcode.js插件生成二维码的两种方式的使用
2019独角兽企业重金招聘Python工程师标准>>> 利用jquery的qrcode.js插件生成二维码的额两种方式,canvas(即画布)方式和table方式(原文地址http: ...
ajax加载vue数据,详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
整理文档,搜刮出一个使用vue.js结合jquery ajax加载数据的两种方式的代码,稍微整理精简一下做下分享. 废话不多说,直接上代码 html代码 demo {{message }} 测试jqu ...
jquery、javascript实现(get、post两种方式)跨域解决方法
jquery.javascript实现(get.post两种方式)跨域解决方法一.实现get方式跨域请求数据浏览器端 <script> $(document).ready(fun ...
jquery ajax提交表单数据的两种方式
jquery ajax提交表单数据的两种方式转载于:https://www.cnblogs.com/zhujiabin/p/4912364.html
（转）基于MVC4+EasyUI的Web开发框架经验总结（12）--利用Jquery处理数据交互的几种方式...
http://www.cnblogs.com/wuhuacong/p/4085682.html 在基于MVC4+EasyUI的Web开发框架里面,大量采用了Jquery的方法,对数据进行请求或者提交, ...
jquery读取json文件跨域_跨域方法的若干种方式
一.跨域的解释那什么是跨域呢,简单地理解就是因为JavaScript同源策略的限制, a.com 域名下的js无法操作 b.com 或是 c.a.com 域名下的对象.当协议.子域名.主域名.端口号 ...

jQuery的9种方式实现下拉列表

jQuery的9种方式实现下拉列表相关推荐

最新文章

热门文章