2단계 메뉴 jquery
23312 단어 jquery
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title><Document></title>
6 </head>
7 <style type="text/css">
8 ul,li,body{margin:0;padding: 0;}
9 #nav{width: 500px;margin: 10px auto;}
10 ul li{list-style: none;}
11 .clear{clear: both;}
12 #nav>li{float: left;position: relative;}
13 li a{display: block;width: 100px;height: 30px;line-height: 30px;text-align:center;background-color: #ccc;text-decoration: none;color: #333;}
14 li a:hover{background: #c66;color: #fff;}
15 li ul{height: 0px;overflow: hidden;position: absolute;top:30px;}
16 </style>
17 <body>
18 <ul id="nav">
19 <li>
20 <a href="#"> </a>
21 <ul class="subNav">
22 <li><a href="#"> </a></li>
23 <li><a href="#"> </a></li>
24 <li><a href="#"> </a></li>
25 <li><a href="#"> </a></li>
26 </ul>
27 </li>
28 <li>
29 <a href="#"> </a>
30 <ul class="subNav">
31 <li><a href="#"> </a></li>
32 <li><a href="#"> </a></li>
33 <li><a href="#"> </a></li>
34 <li><a href="#"> </a></li>
35 </ul>
36 </li>
37 <li><a href="#"> </a></li>
38 <li><a href="#"> </a></li>
39 <li><a href="#"> </a></li>
40 <div class="clear"></div>
41 </ul>
42 <script src="jquery.min.js"></script>
43 <script type="text/javascript">
44 $('#nav>li').hover(
45 function(){
46 $(this).find("ul").animate({height:"150px"}, 200)
47 },
48 function(){
49 $(this).find("ul").animate({height:0}, 200)
50 }
51 )
52 </script>
53 </body>
54 </html>같은 효과를 jquery로 실현하면 훨씬 간단할 것이다.코드는 위와 같다
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
jQuery 전후 예이 기사에서는 jquery after() 및 before() 메소드의 예를 볼 것입니다. before() 메서드는 선택한 요소 앞에 지정된 콘텐츠를 삽입합니다. after() 메서드는 선택한 요소 뒤에 지정된 콘텐츠...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
