前端学习（1002）：简洁版滑动下拉菜单问题解决
生活随笔
收集整理的這篇文章主要介紹了
前端学习（1002）：简洁版滑动下拉菜单问题解决
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
快速滑動 不停切換
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/jquery.min.js"></script><style>div {width: 100px;height: 100px;background-color: pink;display: none;}</style> </head><body><button>顯示</button><button>隱藏</button><button>切換</button><button>移動切換</button><button>移動切換簡化版</button><div></div><script>$(function() {$("button").eq(1).click(function() {$("div").slideUp();});$("button").eq(0).click(function() {$("div").slideDown();});$("button").eq(2).click(function() {$("div").slideToggle();});//鼠標(biāo)切換$("button").eq(3).hover(function() {$("div").slideDown();}, function() {$("div").slideUp();});//stop必須放在動畫的前面$("button").eq(4).hover(function() {$("div").stop().slideToggle();});});</script> </body></html>運行結(jié)果
總結(jié)
以上是生活随笔為你收集整理的前端学习（1002）：简洁版滑动下拉菜单问题解决的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 计算机二级公共基础知识点整理
- 下一篇： 前端学习（1392）:多人管理项目12加