JQuery_jquery를 기반으로 접이식 메뉴 코드를 간단하게 구현

메뉴는 초기화 시 접혀지는 2차 메뉴로, 큰 항목 제목을 클릭하면 2차 목록이 펼쳐져 표시됩니다.
HTML 코드는 다음과 같습니다.

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

서비스 관리

;div class=" FAQlist">

• 제출 대기 중
li> 출시 대기 중

• 프로젝트


• 🎜>< ;/div>
  
  
  업데이트 프로세스< ;/ 범위>
  
  
  
  

  
  
  • a>
  
  
  • 업데이트 프로세스
  
  
  
  FAQ 관리
  🎜>
  
  

  
  
  • 제출 대기 중
  >
  • 출시 대기 중
  
  
  • 공식 프로젝트
  
  
  • ul>
    
  
  
  
  
  
  
  
  
  • 제출용
  
  
  • 출시 대기 중
  ; 공식 프로젝트
  
  • 추가
  
  

홈페이지로 돌아가기

그 중 JQUERY 스크립트는 간단한 몇 줄만으로 원하는 효과를 얻을 수 있습니다. 구체적인 코드는 다음과 같습니다.




코드 복사

코드는 다음과 같습니다.

< script 언어=" javascript" type="text/javascript"> $(document).ready(function () { //보조 메뉴를 숨기도록 설정$(".FAQlist" ).css ("display", "none"); //1단계 메뉴를 클릭하면 이벤트가 발생합니다$(".bartitleFAQ").click(function () {

$( ".FAQlist") .css("display", "none");//모든 보조 메뉴가 보이지 않도록 설정

$(this).next(".FAQlist").css("display", "block "); //현재 1단계 메뉴의 2단계 메뉴가 보이도록 설정
})
})