动画和菜单下拉
展开和收起动画
<html lang="en"><head> <meta charset="UTF-8"> <title>jQuery展开和收起动画</title> <style> *{ margin: 0; padding: 0; } div{ width: 100px; height: 300px; background: red; display: none; } </style> <script src="js/jquery-1.12.4.js"></script> <script> $(function () { // 编写jQuery相关代码 $("button").eq(0).click(function () { $("div").slideDown(1000, function () { alert("展开完毕"); }); }); $("button").eq(1).click(function () { $("div").slideUp(1000, function () { alert("收起完毕"); }); }); $("button").eq(2).click(function () { $("div").slideToggle(1000, function () { alert("收起完毕"); }); }); }); </script></head><body><button>展开</button><button>收起</button><button>切换</button><div></div></body></html>菜单下拉(1)
<html lang="en"><head> <meta charset="UTF-8"> <title>折叠菜单</title> <style> *{ margin: 0; padding: 0; } .nav{ list-style: none; width: 300px; margin: 100px auto; /*border: 1px solid #000;*/ } .nav>li{ border: 1px solid #000; line-height: 35px; border-bottom: none; text-indent: 2em; position: relative; } .nav>li:last-child{ border-bottom: 1px solid #000; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; } .nav>li:first-child{ border-top-right-radius: 10px; border-top-left-radius: 10px; } .nav>li>span{ background: url("images/arrow_right.png") no-repeat center center; display: inline-block; width: 32px; height: 32px; position: absolute; right: 10px; top: 5px; } .sub{ display: none; } .sub>li{ list-style: none; background: mediumpurple; border-bottom: 1px solid white; } .sub>li:hover{ background: red; } .nav>.current>span{ transform: rotate(90deg); } </style> <script src="js/jquery-1.12.4.js"></script> <script> $(function () { // 1.监听一级菜单的点击事件 $(".nav>li").click(function () { // 1.1拿到二级菜单 var $sub = $(this).children(".sub"); // 1.2让二级菜单展开 $sub.slideDown(1000); // 1.3拿到所有非当前的二级菜单 var otherSub = $(this).siblings().children(".sub"); // 1.4让所有非当前的二级菜单收起 otherSub.slideUp(1000); // 1.5让被点击的一级菜单箭头旋转 $(this).addClass("current"); // 1.6让所有非被点击的一级菜单箭头还原 $(this).siblings().removeClass("current"); }); }); </script></head><body><ul class="nav"> <li>一级菜单<span></span> <ul class="sub"> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li>一级菜单<span></span> <ul class="sub"> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li>一级菜单<span></span> <ul class="sub"> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li>一级菜单<span></span> <ul class="sub"> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li>一级菜单<span></span> <ul class="sub"> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li>一级菜单<span></span> <ul class="sub"> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li>一级菜单<span></span> <ul class="sub"> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li>一级菜单<span></span> <ul class="sub"> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li></ul></body></html>菜单下拉(2)
- 注意：在jQuery中如果需要执行动画, 建议在执行动画之前先调用stop方法,然后再执行动画
<html lang="en"><head> <meta charset="UTF-8"> <title>下拉菜单</title> <style> *{ margin: 0; padding: 0; } .nav{ list-style: none; width: 300px; height: 50px; background: red; margin: 100px auto; } .nav>li{ width: 100px; height: 50px; line-height: 50px; text-align: center; float: left; } .sub{ list-style: none; background: mediumpurple; display: none; } </style> <script src="js/jquery-1.12.4.js"></script> <script> $(function () { // 1.监听一级菜单的移入事件 $(".nav>li").mouseenter(function () { // 1.1拿到二级菜单 var $sub = $(this).children(".sub"); // 停止当前正在运行的动画： $sub.stop(); // 1.2让二级菜单展开 $sub.slideDown(1000); }); // 2.监听一级菜单的移出事件 $(".nav>li").mouseleave(function () { // 1.1拿到二级菜单 var $sub = $(this).children(".sub"); // 停止当前正在运行的动画： $sub.stop(); // 1.2让二级菜单收起 $sub.slideUp(1000); }); }); </script></head><body><ul class="nav"> <li>一级菜单 <ul class="sub"> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li>一级菜单</li> <li>一级菜单</li></ul></body></html>
转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 2113132982@qq.com
扫一扫
204
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
