집 >웹 프론트엔드 >JS 튜토리얼 >자바스크립트 드롭다운 목록_javascript 스킬에서 트리 메뉴 표시 구현 방법

자바스크립트 드롭다운 목록_javascript 스킬에서 트리 메뉴 표시 구현 방법

WBOY원래의: 2016-05-16 15:31:461421검색

사용이 매우 간단합니다. 메뉴를 클릭하면 다음 항목이 표시되거나 표시되지 않습니다.
1. 주요 목적: 메뉴 항목을 표시한 후 클릭하여 숨기고 다시 클릭하면 다음 내용이 나타납니다

hidden 및 Overflow="visible"이라는 두 가지 속성이 사용됩니다. 클릭된 함수에서 설정 속성은

이어야 합니다.

node.style.overflow="visible"; 물론 다른 옵션을 숨길 수 있도록 tr의 높이를 설정하는 것도 매우 중요합니다.

2. 동일한 기술을 사용하고 몇 가지를 더 추가하지만 이것을 매개변수 전달
으로 사용하는 것이 매우 일반적입니다.

실현 효과:

<!DOCTYPE html> 
<html> 
 <head> 
 <title>list.html</title> 
 
 <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> 
 <style type="text/css"> 
  dl{ 
  height:18px;/*优先级问题，必须要写*/ 
  overflow:hidden; 
  } 
  dd{ 
  margin:0px; 
  padding:0px; 
  } 
  .close{ 
  height:18px;/*优先级问题，必须要写*/ 
  overflow:hidden; 
  } 
  .open{ 
  height:80px; 
  overflow:visible; 
  background-color:#ff8000; 
  } 
  
 </style> 
 <script type="text/javascript"> 
 
   function click2(node1){ 
//   alert("aa"+node.nodeName);// td 
   var nodes=node1.parentNode; 
//   alert(nodes.nodeName); 
   // alert("aa"+nodes.className); 
   //※※通过传进的对象 判断采用哪种css模式 
   if(nodes.className=="open"){ 
    nodes.className="close"; 
   }else{ 
    nodes.className="open"; 
   } 
   } 
 </script> 
  
  
 </head> 
 <body> 
 <!--层次列表--> 
 <!--当很多时候采用传参就很麻烦,每个都需要去传参 
 <dl> 
 <dt onclick="click1(0)">菜单条1</dt> 
 <dd>菜单1</dd> 
 <dd>菜单2</dd> 
 <dd>菜单3</dd> 
 <dd>菜单4</dd> 
 </dl> 
 <dl> 
 <dt onclick="click1(1)">菜单条2</dt> 
 <dd>菜单11</dd> 
 <dd>菜单22</dd> 
 <dd>菜单33</dd> 
 <dd>菜单44</dd> 
 </dl> 
 <dl> 
 <dt onclick="click1(2)">菜单条3</dt> 
 <dd>菜单12</dd> 
 <dd>菜单23</dd> 
 <dd>菜单34</dd> 
 <dd>菜单45</dd> 
 </dl> 
 --> 
 
 <br/> 
 <br/> 
 <hr/> 
 
 
 <!--<dl class="close">先手动采用css测试，可以然后采用编程使用--> 
 <dl> 
 <dt onclick="click2(this)">1菜单条1</dt> 
 <dd>菜单1</dd> 
 <dd>菜单2</dd> 
 <dd>菜单3</dd> 
 <dd>菜单4</dd> 
 </dl> 
 <dl> 
 <dt onclick="click2(this)">2菜单条2</dt> 
 <dd>菜单11</dd> 
 <dd>菜单22</dd> 
 <dd>菜单33</dd> 
 <dd>菜单44</dd> 
 </dl> 
 <dl> 
 <dt onclick="click2(this)">3菜单条3</dt> 
 <dd>菜单12</dd> 
 <dd>菜单23</dd> 
 <dd>菜单34</dd> 
 <dd>菜单45</dd> 
 </dl> 
 </body> 
</html>

클릭 후: 배경색 지정(CSS 설정)

자바스크립트를 사용하여 드롭다운 목록에 트리 모양 메뉴를 만드는 방법은 이 글을 통해 대략적인 아이디어를 얻으실 수 있을 거라 믿습니다. 당신이 만든 다운리스트는 내가 만든 것보다 더 정교합니다.

성명：

이전 기사：JavaScript를 사용하여 HTML 선택 tag_javascript 기술의 드롭다운 목록 효과를 아름답게 만듭니다.다음 기사：JavaScript를 사용하여 HTML 선택 tag_javascript 기술의 드롭다운 목록 효과를 아름답게 만듭니다.

자바스크립트 드롭다운 목록_javascript 스킬에서 트리 메뉴 표시 구현 방법

관련 기사