چگونه ایجاد می‌شود: نمای درخت

آموزش نحوه استفاده از CSS و JavaScript برای ایجاد نمای درخت.

نمای درخت

قدم اول - اضافه کردن HTML:

<ul id="myUL">
  <li><span class="caret">Beverages</span>
    <ul class="nested">
      <li>Water</li>
      <li>Coffee</li>
      <li><span class="caret">Tea</span>
        <ul class="nested">
          <li>Black Tea</li>
          <li>White Tea</li>
          <li><span class="caret">Green Tea</span>
            <ul class="nested">
              <li>Sencha</li>
              <li>Gyokuro</li>
              <li>Matcha</li>
              <li>Pi Lo Chun</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

مرحله دوم - اضافه کردن CSS:

/* فهرست‌های پیش‌فرض حذف می‌شوند */
ul, #myUL {
  نوع فهرست: هیچ;
}
/* حاشیه و فاصله‌های والد ul حذف می‌شوند */
#myUL {
  مجوز: 0;
  حاشیه: 0;
}
/* سبک caret/پیکان تنظیم می‌شود */
.caret {
  موس: اشاره‌گر;
  انتخاب کاربر: نه; /* جلوگیری از انتخاب متن */
}
/* از unicode برای ایجاد caret/پیکان استفاده می‌شود و سبک آن تنظیم می‌شود */
.caret::before {
  محتوا: "\25B6";
  رنگ: سیاه;
  نمایش: بلوک;
  مجوز سمت راست: 6 پیکسل;
}
/* زمانی که روی caret/پیکان آیکون کلیک می‌شود، آن را چرخش می‌دهد (با استفاده از جاوااسکریپت) */
.caret-down::before {
  تغییر شکل: 90درجه;
}
/* لیست‌های پیچیده مخفی می‌شوند */
.nested {
  نمایش: نه;
}
/* زمانی که کاربر روی caret/پیکان کلیک می‌کند، لیست‌های پیچیده نمایش داده می‌شوند (با استفاده از جاوااسکریپت) */
.active {
  نمایش: بلوک;
}

مرحله سوم - اضافه کردن جاوااسکریپت:

var toggler = document.getElementsByClassName("caret");
var i;
for (i = 0; i < toggler.length; i++) {
  toggler[i].addEventListener("click", function() {
    this.parentElement.querySelector(".nested").classList.toggle("active");
    this.classList.toggle("caret-down");
  });
}

به طور مستقیم امتحان کنید

چک باکس درخت نمودار

در این مثال، ما از یک 'عنصر صندوق رای' unicode استفاده می‌کنیم نه caret:

مثال

به طور مستقیم امتحان کنید