jquery 다중 레벨 드롭다운 메뉴 핵심 code_jquery
- WBOY원래의
- 2016-05-16 18:26:43923검색
jquery
$( 문서).ready(function(){
$("ul li").hover(function(){
$(this).find("ul:first").show();//마우스 그러면 li 아래의 첫 번째 ul이 표시됩니다.
},function(){
$(this).find("ul:first").hide();//마우스가 ul을 남깁니다. li 아래에 d를 숨깁니다
})
$("ul li ul li ul").prev().addClass("bbb");//li 아래의 ul이 aaa인 이전 형제 요소에 CSS를 추가합니다. 스타일;
})
css
ul, li{padding:0;margin:0;}
ul li{float:left;;margin-right:1px;display:inline;list- 스타일:없음;텍스트- 정렬:중심;}
ul li ul li{float:none;배경:#ccc;margin-bottom:1px;display:block;_display:inline;position:relative;}
ul li ul{디스플레이: 없음;}
ul a{텍스트 장식:없음;너비:80px;높이:20px;라인 높이:20px;디스플레이:블록;배경:#bbb;글꼴 크기:12px}
ul li a :hover{배경:#eee;color:#000}
ul li ul li .aaa{position:absolute;left:80px;top:0;border-left:1px solid #fff}
ul li ul li .aaa li{float:none;}
body .bbb{배경:#f00;color:#fff}
html
코드 복사 코드는 다음과 같습니다.
$( 문서).ready(function(){
$("ul li").hover(function(){
$(this).find("ul:first").show();//마우스 그러면 li 아래의 첫 번째 ul이 표시됩니다.
},function(){
$(this).find("ul:first").hide();//마우스가 ul을 남깁니다. li 아래에 d를 숨깁니다
})
$("ul li ul li ul").prev().addClass("bbb");//li 아래의 ul이 aaa인 이전 형제 요소에 CSS를 추가합니다. 스타일;
})
css
코드 복사 코드는 다음과 같습니다:
ul, li{padding:0;margin:0;}
ul li{float:left;;margin-right:1px;display:inline;list- 스타일:없음;텍스트- 정렬:중심;}
ul li ul li{float:none;배경:#ccc;margin-bottom:1px;display:block;_display:inline;position:relative;}
ul li ul{디스플레이: 없음;}
ul a{텍스트 장식:없음;너비:80px;높이:20px;라인 높이:20px;디스플레이:블록;배경:#bbb;글꼴 크기:12px}
ul li a :hover{배경:#eee;color:#000}
ul li ul li .aaa{position:absolute;left:80px;top:0;border-left:1px solid #fff}
ul li ul li .aaa li{float:none;}
body .bbb{배경:#f00;color:#fff}
html
코드 복사 코드는 다음과 같습니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.