javascript - CSS によるツリー構造の設計

Question

HTML/CSS を使用して次のような構造を設計するにはどうすればよいですか?

参照サイトのリンクがあれば提供してください

編集:私の質問を受け取っていない場合は申し訳ありませんが、私は設計についてあまり知らないので、私が構築しようとしているのはツリー構造ですが、どの HTML タグを使用すればよいのか、どのようにこれらを描画するのかわかりませんこれにはあなたの助けが必要です。これを達成する方法を知っている場合は、共有してください。

ありがとうございました。

Answer 1

https://github.com/wesnolte/jOrgChart

これは、あなたが望むことを正確に実行する美しい jQuery プラグインです。

コードサンプル:

これがあなたのunordered list.

<ul id="org">
<li>
    Food
    <ul>
        <li id="beer">Beer</li>
        <li>Vegetables
            <ul>
                <li>Pumpkin</li>
            </ul>
        </li>
        <li>Bread</li>
        <li class="collapsed">Chocolate
            <ul>
                <li>Topdeck</li>
                <li>Reese's Cups</li>
            </ul>
        </li>
    </ul>
</li>

divこのようにダミーを追加します

<div id="chart" class="orgChart"></div>

今、あなたは単に使うことができます

jQuery(document).ready(function() {
        $("#org").jOrgChart({
            chartElement : '#chart',
            dragAndDrop  : true
        });
    });

unordered listディレクトリツリー/組織図構造にレンダリングします。