อะคอร์เดียนใน JavaScript

ตอนนี้เรามาลองสร้างอะคอร์เดียนกัน มันคล้ายกับแท็บที่ถูกพลิกไปด้านข้าง นอกจากนี้ในอะคอร์เดียนคุณยังสามารถปิดแท็บปัจจุบันได้ด้วยการคลิกที่ลิงก์ที่ใช้งานอยู่

นี่คือตัวอย่าง:

ศึกษารูปแบบการจัดวางที่เราจะใช้แก้ไขปัญหานี้ด้วย:

html<div id="parent">
  <div class="tab active">
    <div class="link">
      <a href="#" >แท็บ 1</a>
    </div>
    <div class="text">
      ข้อความของแท็บ 1
    </div>
  </div>
  <div class="tab">
    <div class="link">
      <a href="#" >แท็บ 2</a>
    </div>
    <div class="text">
      ข้อความของแท็บ 2
    </div>
  </div>
  <div class="tab">
    <div class="link">
      <a href="#" >แท็บ 3</a>
    </div>
    <div class="text">
      ข้อความของแท็บ 3
    </div>
  </div>
</div>

css#parent {
  margin: 0 auto;
  width: 400px;
}
.tab {
  margin-bottom: 10px;
}

.tab .link a {
  display: block;
  padding: 10px;
  color: black;
  text-decoration: none;
  text-align: center;
  background: #f8f8f8;
  border: 1px solid gray;
}
.tab .link:hover a {
  background: #f2f2f2;
}

.tab:not(.active) .text {
  display: none;
}
.tab .text {
  border: 1px dashed gray;
  border-top: none;
  
  padding: 10px;
  height: 300px;
}

การอภิปราย

ในทางเทคนิคโค้ด HTML ของอะคอร์เดียนสะดวกกว่าโค้ดของแท็บ: ในนั้นลิงก์จะอยู่ตรงเหนือสปอยเลอร์ที่พวกมันเปิดและปิด นอกจากนี้คลาส active ในรูปแบบการจัดวางของเราถูกกำหนดให้กับผู้ปกครองทั่วไปของลิงก์และสปอยเลอร์

นั่นหมายความว่าเมื่อคลิกที่ลิงก์เพียงแค่ต้องยกเลิกการใช้งานแท็บเก่าและเปิดใช้งานแท็บใหม่ เพื่อยกเลิกการใช้งานแท็บเก่าต้องหาแท็บที่มีคลาส active และลบคลาสนี้ออกจากมัน

เพื่อเปิดใช้งานแท็บใหม่ต้องเมื่อคลิกที่ลิงก์ให้หาแท็บที่เป็นผู้ปกครองของลิงก์นี้และกำหนดคลาส active ให้กับมัน ในทางเทคนิคการค้นหาดังกล่าวสามารถทำได้ดังนี้: แค่หาผู้ปกครองของลิงก์ที่ใกล้ที่สุดซึ่งมีคลาส tab