JQuery는 멋진 수평 드롭다운 menu_jquery를 구현합니다.

li{
background-color:#EEEEEE; //배경 이미지가 배경색을 덮습니다
}
a{
//모든 밑줄 취소
text-design:none;
padding-left:20px;
display:block; 🎜> 디스플레이:인라인 블록;
너비:100px;
패딩-하단:3px;
.hmain a{
색상:흰색 ;
배경-이미지:url(../images/collapsed.gif)
배경-반복:no-repeat;
배경 위치:3px 센터; li a {
색상:검정색;
배경 이미지:없음
.hmain ul{
표시:none;
.hmain{
float: left;
margin-right:1px;
}



jquery.js 및 menu.js가 참조됩니다. HTML에서 menu.js는 다음과 같습니다.




코드 복사


코드는 다음과 같습니다.


$(document).ready( function(){
//페이지의 DOM이 로드되면 실행된 코드
$(".main> a,.hmain a").click( function(){
//메인 메뉴 항목에 해당하는 하위 메뉴 항목을 찾았습니다
var ulNode=$(this).next("ul")
ulNode.slideToggle()
changeIcon( $(this))
} );
$(".hmain").hover(function(){
$(this).children ("ul").slideToggle();
changeIcon($(this).children( "a"));

mainNode.css("배경 -image","url('images/expanded.gif')");
}else{
mainNode.css("Background-image","url('images/collapsed.gif')") ;
}
}
}


이 멋진 드롭다운 메뉴가 완성되었습니다. 구현은 매우 간단하지만 내부의 작은 지식 포인트는 매우 단편적입니다. 예: .main a와 .main>a의 차이점은 전자는 .main 클래스의 요소 내용을 사용하여 모든 노드를 선택하는 반면, 후자는 .main의 하위 노드 중에서 노드만 선택한다는 것입니다.