做成下面的效果
<!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="jquery.min.js"></script> <style> div { height: 400px; width: 200px; background-color: red; display: none; } </style> </head> <body> <button>下拉滑动</button> <button>上拉滑动</button> <button>切换滑动</button> <div></div> <script> $(function () { $("button").eq(0).click( function () { $("div").slideDown(); } ) $("button").eq(1).click( function () { $("div").slideUp(); } ) $("button").eq(2).click( function () { $("div").slideToggle(); } ) } ) </script> </body> </html> <!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="jquery.min.js"></script> <style> li{list-style: none;} .nav{ height: 600px; width: 800px; margin: 100px auto; } .nav>li{ border: 1px solid red; float: left; margin-left: 5px; } .nav>li ul{ display: none; } </style> </head> <body> <ul class="nav"> <li> <a href="">微博</a> <ul> <li><a href="">私信</a></li> <li><a href="">评论</a></li> <li><a href="">@我</a></li> </ul> </li> <li> <a href="">微博</a> <ul> <li><a href="">私信</a></li> <li><a href="">评论</a></li> <li><a href="">@我</a></li> </ul> </li> <li> <a href="" style="margin-left: 5px;">微博</a> <ul> <li><a href="">私信</a></li> <li><a href="">评论</a></li> <li><a href="">@我</a></li> </ul> </li> <li> <a href="">微博</a> <ul> <li><a href="">私信</a></li> <li><a href="">评论</a></li> <li><a href="">@我</a></li> </ul> </li> </ul> <script> $(function () { $('.nav>li').hover(function () { $(this).children('ul').slideToggle(); }) }) </script> </body> </html>
