如何创建：树视图

学习如何使用 CSS 和 JavaScript 创建树视图。

树视图

树视图表示信息的层次结构视图，其中每个项目可以有多个子项目。

单击箭头可打开或关闭树分支。

  • Beverages
    • Water
    • Coffee
    • Tea
      • Black Tea
      • White Tea
      • Green Tea
        • Sencha
        • Gyokuro
        • Matcha
        • Pi Lo Chun

亲自试一试

树视图

第一步 - 添加 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>سنچا</li>
              <li>گیوکورو</li>
              <li>ماتچا</li>
              <li>پی لو چون</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

دوام - سی ایس ایس اضافہ کریں:

/* پیش فرض کی آئیٹم بولٹز کو حذف کریں */
ول، #myUL {
  لیسٹ سٹائل تیپ: نا;
}
/* والد ul کا بیرونی مارگ اور اندرونی مارگ حذف کریں */
#myUL {
  مارگ: 0;
  پیدائی: 0;
}
/* caret/تیر کا سائز بند کریں */
.caret {
  کرسر: پوائنٹر;
  یوزر سلیکٹ: نا; /* متن کا انتخاب روکنا */
}
/* یونیکوڈ کا استعمال سے caret/تیر بنائیں اور اس کا سائز بند کریں */
.caret::before {
  کنٹین: "\25B6";
  رنگ: بلک;
  ڈسپلے: ان لائن بلک;
  مارگ راست: 6 پیکس;
}
/* جب کسی کا caret/تیر کلک کرتا ہے تو اس کو چکر دیں (جاوااسکریپت استعمال کریں) */
.caret-down::before {
  ترفوم: رائٹ 90 ڈیگر;
}
/* نچلے لسٹ نمائش کو پوشا دیں */
.nested {
  ڈسپلے: نا
}
/* جب یوزر caret/تیر کا کلک کرتا ہے تو نچلے لسٹ نمائش میں لائیں (جاوااسکریپت استعمال کریں) */
.active {
  ڈسپلے: بلک
}

سهام - جاوااسکریپت اضافہ کریں:

وارای توگرر = دکومنٹ کلاس اٹرای ("caret");
وارای i;
برای (i = 0; i < توگرر.length; i++) {
  توگرر[i].addEventListener("click", function() {
    this.parentElement.querySelector(".nested").classList.toggle("active");
    this.classList.toggle("caret-down");
  });
}

亲自试一试

چینا چک باکس دروویو

在这个例子中，我们使用一个“投票箱” unicode 而不是 caret：

实例

亲自试一试