web-dev-qa-db-ja.com

展開可能なツリーメニューリスト

私が達成したいのは以下です：

ページの左側に表示されるツリービューリストが必要です。アイテムが展開されると、そのアイテムはデータベースから読み込まれます（この部分を実行できます）。基本的には次のようになります。

+Category1
+Category2
+Category3
+Category4

ユーザーが+をクリックすると、DBからデータが取得されてページに追加されるまで、以下が表示されます。

+Category1
-Category2
    loading ...
+Category3
+Category4

データが読み込まれた後、各サブカテゴリにはサブサブカテゴリがあります。

+Category1
-Category2
    +Sub-Cat1
    +Sub-Cat2
    +Sub-Cat3
    +Sub-Cat4
+Category3
+Category4

どうすればこれを達成できますか？

注：（*または>またはリストのその他の記号を配置する方法を知りたいので、これはCSSだと思いますが、デザインにはまったく対応していません!!）

あなたの助けは本当に感謝しています。

htmlcsslistviewtreeview
16
sikas

ブラウザ要件はありますか？古いバージョンのIEをサポートするために、selectivizrとともに[CSS]忍者の例を使用しました。 [CSS]忍者サイトにあるものを除いて、アクセシブルな例はありません。

純粋なCSS折りたたみツリーメニュー

そしてselectivizr：

selectivizr

この例は、ファイルナビゲーションのシナリオで使用することを目的としていますが、必要に応じて、かなり簡単に変更して、フォルダーとファイルアイコンを削除できます。

9
Joseph Ferris

わかりましたので、アイテムのリストはulだと思います。すべてのアイテムに、closedというクラスを追加できます。このクラスは、cssでは次のようになります。

.closed:before{content:'+';}
.opened:before{content:'-';}

次に、JavaScriptを使用して、これらのクラスを切り替えます。上記のCSSでこれらの+と-の記号に他のスタイルを追加して、境界線と背景色を付けることもできます。

5
bigblind