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

私は何を達成したいことは以下の通りです：、それは項目がロードさ展開可能なツリーメニューリスト

私は項目が展開されている場合、ページの左側に表示されます、ツリービューリストを持つようにしたいですデータベース（私はこの部分を行うことができます）から、その基本的には次のようになります：

+Category1 
+Category2 
+Category3 
+Category4

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

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

データがロードされた後、各サブカテゴリはサブカテゴリを持つことになります。

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

どうすればこの問題を解決できますか？

注：私は置く方法を知りたい（*または>またはリストのために他のシンボルを、!!私は、これはCSSであると信じていますが、私はすべてのデザインでは動作しません）

あなたの助けにされます本当に感謝。

出典

2011-12-14 sikas

[OK]を、私はアイテムのリストは、すべての項目にul で、あなたが閉じたというクラスを追加することができますと仮定し、このCLASEは、CSSで次のようになります。そして、

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

出典

2011-12-14 14:35:42 bigblind

これにはHTMLコードがありますか？私はそれが質問とまったく同じように見せたい。 – sikas

jqueryの '.text（newtext）'メソッドを開いたときに、その要素のテキストに - をつけることができます。それを削除し、セクションが再び閉じるときに+に切り替えます。このようなツリーを作成するHTMLはありません。 – bigblind

Frederik Creemers、私はHTMLで動作しません。私の仕事はすべてPHPとMySQLを中心に扱っています...それで、デモ用のサンプルコードを用意していただき、ありがとうございます。私はGoogleで何かを見つけようとしていますが、良い例が見つかりましたが、週のチュートリアルは見つかりました！ – sikas

ブラウザの要件はありますか？私はselectivizrと一緒に[CSS] Ninjaの例を使ってIEの古いバージョンをサポートしています。アクセスの例を持っていない、離れて[CSS]忍者サイト上にあるものから：

Pure CSS collapsible tree menu

そしてselectivizr：

selectivizr

例がためにそれを使用して目指していますファイルナビゲーションのシナリオですが、簡単に変更して、フォルダやファイルアイコンを削除することができます。

出典

2011-12-14 15:42:40

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

答えて

関連する問題