jquery學習第八期

02-04

創建摺疊式菜單

在這個解決方案中我們將應用上滑和下滑技巧來完成懸停下滑以及脫離後上滑的效果

<!DOCTYPE HTML>n<html>n<head>n <meta charset="UTF-8" lang="en">n <title>n 創建摺疊式菜單n </title>n <style>n .menus{n width:200px;n padding: 5px;n margin:1px;n font-weight: bold;n background-color: #0ff;n }n .menuitems{n display: none;n }n a{n display: block;n border-bottom: 1px solid #fff;n text-decoration: none;n background: #00f;n color: #fff;n padding: 10px;n font-weight: bold;n width: 190px;n }n .menuitems a:hover{n background: #000;n }n li{n display: inline;n }n ul{n display: inline;n }n </style>n <script src="jquery-3.2.1.min.js"></script>n <script>n $(document).ready(function () {n $(p.menus).mouseout(function () {n $(div.menuitems).slideUp("slow");n $(p).css({backgroundImage:""});n });n $(p.menus).mouseover(function () {n $(this).css({background-img:"url(down.jpg)",background-repeat:"no-repeat",background-position:"right"}).next("div.menuitems").slideDown(500).siblings("div.menuitems").slideUp("slow");n $(this).siblings().css({backgroundImage:""});n });n });n </script>n</head>n<body>n <p class="menus">Books</p>n <div class="menuitems">n <ul>n <li>n <a href="https://www.zhihu.com/people/shuda-gao/activities">a</a>n </li>n <li>n <a href="https://www.zhihu.com/people/shuda-gao/activities">b</a>n </li>n <li>n <a href="https://www.zhihu.com/people/shuda-gao/activities">c</a>n </li>n </ul>n </div>n <p class="menus">Movies</p>n <div>n <ul>n <li>n <a href="https://www.zhihu.com/people/shuda-gao/activities">1</a>n </li>n <li>n <a href="https://www.zhihu.com/people/shuda-gao/activities">2</a>n </li>n <li>n <a href="https://www.zhihu.com/people/shuda-gao/activities">3</a>n </li>n </ul>n </div>n</body>n</html>n