아코디언 탐색 효과를 얻기 위해 기본 JS를 사용하는 방법에 대한 자세한 그래픽 설명

웹 사이트를 탐색할 때 이동 경로 탐색, 드롭다운 메뉴 탐색, 아코디언 탐색 등과 같은 다양한 탐색 스타일이 있다는 것을 알고 계셨나요? 프런트엔드 개발자로서 기본 JS를 사용하여 다음 작업을 수행하는 방법을 알고 계십니까? 아코디언 탐색 효과를 얻으시겠습니까? 이 기사에서는 네이티브 JS와 JS 아코디언 효과 코드를 사용하여 아코디언 효과를 만드는 아이디어에 대해 설명합니다. 이는 특정 참조 가치가 있으며 관심 있는 친구들이 살펴볼 수 있습니다.

JS를 사용하여 아코디언 탐색을 만들려면 토글, for 루프, if 함수 등과 같은 많은 JavaScript 지식이 필요합니다. 확실하지 않은 경우 PHP 중국어 웹사이트의 관련 기사를 참조하거나 JavaScript를 방문하세요. 비디오 튜토리얼, 도움이 되셨으면 좋겠습니다!

아코디언 탐색 효과 구현 아이디어: 마우스가 첫 번째 버튼을 클릭하면 첫 번째 버튼의 내용이 표시되고 두 번째 버튼을 클릭하면 두 번째 버튼의 내용이 표시되므로 에. JavaScript에서는 for 루프를 사용하여 버튼 수를 탐색하고 if 함수를 사용하여 버튼 내용을 표시하고 숨길 maxHeight를 결정합니다. 구체적인 코드는 다음과 같습니다.

HTML 부분: 버튼 3개와 내용을 설정합니다. 버튼에 해당하는

<h2>手风琴动画效果</h2>  
  <button class="btn">选项 1</button>
  <div class="p1">
    <p>内容1</p>
  </div> 
  <button class="btn">选项 2</button>
  <div class="p1">
    <p>内容2</p>
  </div> 
  <button class="btn">选项 3</button>
  <div class="p1">
    <p>内容3</p>
  </div>

CSS 부분: CSS를 사용하여 페이지를 아름답게 하고 버튼 위로 마우스를 지나갈 때 색상이 어두워지는 등 간단한 효과를 얻을 수 있습니다.

.btn {
       background-color: #eee;
       color: #444;
       cursor: pointer;
       padding: 18px;
       width: 100%;
       border: none;
       text-align: left;
       outline: none;
       font-size: 15px;
       transition: 0.4s;
   }
   
   .btn.active,.btn:hover {
       background-color: #ddd;
   }  
   .p1 {
       padding: 0 18px;
       background-color: white;
       max-height: 0;
       overflow: hidden;
       transition: max-height 0.2s ease-out;
   }

JavaScript 부분: 아코디언 효과의 핵심 부분으로, 버튼 내용을 숨기고 표시할 수 있는지 여부를 결정합니다

var btn = document.getElementsByClassName("btn");
  for (var i = 0; i < btn.length; i++) {
    btn[i].onclick = function() {
      this.classList.toggle("active");
      var panel = this.nextElementSibling;
      if (panel.style.maxHeight){
        panel.style.maxHeight = null;
      } else {
        panel.style.maxHeight = panel.scrollHeight + "px";
      } 
    }
  }

효과는 다음과 같습니다. 그림에 표시된 대로:

위에서는 텍스트, 그림 및 코드를 사용하여 기본 JS를 사용하여 구현하는 방법을 소개합니다. 아코디언 내비게이션 효과 한 번도 접해보지 못한 친구들은 꼭 직접 해보고 이런 효과를 손으로 쓸 수 있는지 확인해 보세요. 이 기사가 도움이 되기를 바랍니다!

더 많은 관련 튜토리얼을 보려면 JavaScript 중국어 참조 매뉴얼

을 방문하세요.

위 내용은 아코디언 탐색 효과를 얻기 위해 기본 JS를 사용하는 방법에 대한 자세한 그래픽 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!