js 클릭 으로 2 단계 메뉴 기능 전개

비록 jQuery 는 이미 매우 잘 사용 되 었 지만 실제 개발 프로젝트 에 많은 제한 이 있 습 니 다.예 를 들 어 프로젝트 팀 의 기발 한 요구,그 어떠한 플러그 인 도 사용 할 수 없습니다.물론 플러그 인 이 자원 을 점용 하 는 것 도 고려 합 니 다.왜냐하면 100+KB 는 소형 프로젝트 와 매우 크기 때 문 입 니 다.저 는 최근 에 클릭 하여 2 급 메뉴 를 펼 치 라 는 요 구 를 만 났 습 니 다.물론 원생 의 JS 로 만 쓸 수 있 습 니 다.저 는 인터넷 의 사례 를 참고 하여 보충 하고 공유 하 겠 습 니 다.
기본 으로 페이지 를 열 고 들 어 올 때 2 급 메뉴 가 숨겨 져 있 으 면 클릭 해 야 2 급 메뉴 를 보 여 주 며 클릭 하면 2 급 메뉴 를 숨 기 는 것 입 니 다.디 스 플레이 와 숨 기기 용 display="block"과 display="none"을 실현 하 는 두 가지 점 이 있 습 니 다.또한 판단 을 해 야 합 니 다.if   else 의 판단 은 현재 block 인지 none 인지 입 니 다.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title>Document</title> 
 <style type="text/css"> 
  #sub_menu_1,#sub_menu_2{ 
   display: none; 
  } 
  ul li:hover{ 
   cursor: pointer; 
  } 
 </style> 
</head> 
<body> 
 <ul> 
  <li onclick = "f('sub_menu_1')">    1 
   <ul id="sub_menu_1"> 
    <li>    1</li> 
    <li>    1</li> 
    <li>    1</li> 
    <li>    1</li> 
   </ul> 
  </li> 
  <li onclick="f('sub_menu_2')">    2 
   <ul id="sub_menu_2"> 
    <li>    2</li> 
    <li>    2</li> 
    <li>    2</li> 
    <li>    2</li> 
   </ul> 
 
  </li> 
  <li>    3</li> 
 </ul> 
 <script type="text/javascript"> 
  function f(str){ 
    var sub_menu = document.getElementById(str); 
    var dis_v = sub_menu.style.display; 
     
    if(dis_v == "block") 
     sub_menu.style.display = "none"; 
    else 
     sub_menu.style.display = "block"; 
      
   } 
   
 </script> 
</body> 
</html> 
1 급 메뉴 의 li 는 a 탭 을 추가 할 수 없습니다.그렇지 않 으 면 효과 가 없습니다.
페이지 가 기본적으로 2 급 메뉴 로 들 어 오 면 클릭 할 때 닫 습 니 다.style 태그 의 스타일 디 스 플레이="none"을 직접 제거 하면 됩 니 다.동시에 js 를 수정 해 야 합 니 다.

<script type="text/javascript"> 
  function f(str){ 
    var sub_menu = document.getElementById(str); 
    var dis_v = sub_menu.style.display; 
     
    if(dis_v == "none") 
     sub_menu.style.display = "block"; 
    else 
     sub_menu.style.display = "none"; 
      
   } 
   
 </script> 
자세히 보 세 요.그렇지 않 으 면 두 번 클릭 해 야 원 하 는 효과 가 나타 날 수 있 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기