jQuery는 축소 및 확장 가능한 계단식 메뉴 예제 code_javascript 기술을 구현합니다.

프레임워크를 사용하지 않고 순수한 JavaScript 코드를 사용한다면 계단식 메뉴를 만드는 것이 어려울 수 있지만 프레임워크를 사용하면 이 작업이 매우 쉽습니다. 이것이 프레임워크의 장점입니다. Dadi는 개발 효율성을 매우 향상시키고 더 안정적이고 유지 관리가 더 쉽습니다. 계단식 메뉴를 구현하기 위해 jQuery를 사용하는 일반적인 단계는 다음과 같습니다.

•1. 먼저

및
• 를 사용하여 계단식 메뉴를 만듭니다.
  
  코드는 다음과 같습니다.
  "http://www.w3 .org /TR/html4/loose.dtd">
  
  
  
  
  
  
  
  
   
  
     < a href= "#" mce_href="#">나는 메뉴 1
    
  • 나는 하위 메뉴 1
     
  • 나는 하위 메뉴 2
  
   
  
   
  
     나는 메뉴 2>
    
  • 나는 하위 메뉴 3
  
               
  • 나는 하위 메뉴 4< / li>
     
  
  
  
  
  
  •2. 계단식 메뉴 축소를 제어하는 ​​JavaScript 코드를 작성합니다.
  
  
  코드 복사 코드는 다음과 같습니다.
  //클릭해야 합니다 메인 메뉴에서 버튼을 누르면 해당 하위 메뉴가 표시될 수 있습니다. 하위 메뉴를 다시 클릭하면 숨겨집니다.
  //페이지가 로드되면 모든 메인 메뉴에 onclick 이벤트를 추가해야 합니다.
  //메인 메뉴를 클릭할 수 있는지 확인 하위 메뉴 표시 또는 숨기기
  //등록 페이지가 로드될 때 실행되는 메서드
  $(document).ready(function() {
  //여기에 필요합니다 먼저 모든 메인 메뉴를 찾으려면
  //모든 메인 메뉴에 대한 클릭 이벤트를 등록하세요
  // ul에서 노드를 찾습니다
  var as = $("ul > a");
  as .click(function() {
  // 여기서는 현재 ul에서 li를 찾은 다음 li를 표시해야 합니다.
  //현재 클릭한 노드를 가져옵니다
  var aNode = $(this) ;
  //현재 a 노드 바이트 포인트의 모든 li 형제 찾기
  var lis = aNode.nextAll("li");
  //자식 노드 표시 또는 숨기기
  lis.toggle( "show");
  });
  });
  
  
  •CSS 파일을 생성하여 라벨 표시 효과 제어
  
  
  
  코드 복사 코드는 다음과 같습니다.
  /*모든 li가 작은 점을 표시하지 않도록 하는 방법은 무엇입니까? CSS 태그 선택기를 사용할 수 있습니다*/
  li {
  list-style: none; /* li 앞의 작은 점을 사라지게 합니다*/
  margin-left: 18px /*들여쓰기 효과를 얻으려면 하위 메뉴를 오른쪽으로 일정 거리 이동하세요* /
  display: none; /*모든 하위 메뉴 만들기 먼저 메뉴 숨기기*/
  }
  a{
  text-designation: none /*링크 밑줄 없애기*/
  }
  
  
  jQuery가 제공하는 편리함:

  1. 클릭한 메뉴를 찾을 때 $(this) 하나만 필요합니다

  2. 노드를 표시하고 숨기려면 토글(toggle) 문 하나만 필요하며 배열의 모든 노드에 이 기능을 구현할 수도 있습니다.

  3. 특정 태그 아래의 모든 태그 찾기: $("ul > a")