동적 menu_jquery를 구현하는 jquery의 예제 코드

jquery가 동적 메뉴를 구현하는 방식은 jquery 팝업 창이 JavaScript를 사용하여 CSS를 작동하는 방식과 유사합니다.

구체적인 단계는 다음 단계로 나눌 수 있습니다.

•표현하고자 하는 메뉴를 담은 html페이지를 생성합니다

코드복사 코드는 다음과 같습니다

                                                                                                                                                 <

하위 메뉴 2

 
 

  
                          
• ;/div>
  
  
  
  
  •메뉴 표시를 제어하는 ​​CSS 파일 만들기
  
  
  
  

코드 복사

코드는 다음과 같습니다 /*모든 li가 작은 점을 표시하지 않게 하려면 CSS 태그 선택기를 사용할 수 있습니다*/li{ /*목록 앞의 작은 점을 사라지게 만듭니다*/ 목록 스타일: 없음;

/*들여쓰기 효과*/

여백 왼쪽: 18px;
/*메뉴 숨기기*/
표시: 없음;
}
a{
/*텍스트 표시 방법*/
text-꾸밈: 없음;
}


•메뉴 표시를 제어하는 ​​JavaScript 파일 생성

코드 복사

코드는 다음과 같습니다./* * 메인 메뉴와 하위 메뉴를 클릭하세요 다시 메인 메뉴를 클릭하면 하위 메뉴가 숨겨집니다 * 로딩 시 메인 메뉴에 onclick 이벤트를 추가하려면 코드를 작성해야 합니다. * 메서드가 실행됩니다. 등록 페이지가 로드될 때

*/

$(document).ready(function(){
//var uls = $("ul ");
//아래에서 a 노드를 찾습니다. ul
var as = $("ul > a");
as.click(function(){
//먼저 현재 ul li를 에서 찾은 다음 li를 표시하도록 합니다
/ /현재 클릭된 ul 노드 가져오기
var aNode = $(this);
//클릭된 ul 노드 아래의 모든 li 노드 찾기
var lis = aNode.nextAll("li");
//ul
lis.toggle("slow");
});
});


의 li 하위 노드를 표시하거나 숨깁니다.