9

物事の階層を表示する Web アプリケーションを構築しています。階層は、フォルダーとファイルを含むファイル システムの階層によく似ています。つまり、ファイルとサブフォルダーを任意の深さレベルで含むフォルダーを作成します (ただし、3 レベルより深くなることはありません)。

階層全体が 1 つのビューに表示されます。ツリー形式で表示され、ユーザーが自由にフォルダを展開/閉じることができます。標準のファイル システム ブラウザと同じように、さまざまなレベルがインデントされています。

これを HTML と CSS で表現するにはどうすればよいでしょうか? 私が助けを必要としているのはデザイン/外観そのものではなく、HTML を使用してこれを適切に構成する方法であることに注意してください。リストを使用する必要がありますか?

4

5 に答える 5

8

HTML で表現する良い方法は、ファイル リストを HTML リストとして整理することです:) たとえば、次のようになります。

<ul>
     <li>Folder 1
           <ul>
               <li>SubFile 1</li>
               <li>SubFile 2</li>
               <li>SubFile 3</li>
           </ul></li>
     <li>Folder 2
           <ul>
               <li>SubFile 4</li>
               <li>SubFile 5</li>
               <li>SubFile 6</li>
           </ul></li>
     <li>Main File 1</li>
     <li>Main File 2</li>
</ul>

その場合、リストはすでに階層を表しているため、CSS は非常にソフトになる可能性があります。

于 2013-07-10T08:41:41.197 に答える
1

<ul>これは「順序付けられていないリスト」のためのものですが、フォルダー構造は何らかの順序である可能性が高いため、避けたいと思います。

定義リストまたは順序付きリストを使用します。

<dl>
    <dt>Folder 1
        <dl>
            <dt>Child 1</dt>
            <dt>Child 2</dt>
            <dt>Child 3</dt>
        </dl>
    </dt>
    <dt>Folder 2
        <dl>
            <dt>Child 1</dt>
            <dt>Child 2</dt>
            <dt>Child 3</dt>
        </dl>
    </dt>
</dl>

<ol>
    <li>Folder 1
        <ol>
            <li>Child 1</li>
            <li>Child 2</li>
            <li>Child 3</li>
        </ol>
    </li>
    <li>Folder 2
        <ol>
            <li>Child 1</li>
            <li>Child 2</li>
            <li>Child 3</li>
        </ol>
    </li>
</ol>
于 2013-07-10T08:45:17.600 に答える
0 
I have created folder hierarchy using list items. This will help for sure.


$(function() {
        setFolderHeirarchy();
    });

    function setFolderHeirarchy() {
               var labelWrapper= $('.labelWrapper');
                $(labelWrapper).each(function () {
                    if (!$(this).next('.subFolderHeirarchy')||$(this).next('.subFolderHeirarchy').length==0) {
                        $(this).find('.arrow').remove();
                    }
                    else{
                        console.log($(this).next('.subFolderHeirarchy'));
                    }
                });

     

        $('.labelWrapper').click(function() {
            if ($(this).next('.subFolderHeirarchy').length > 0) {
                $(this).parent('.folderHeirarchyList').toggleClass('active');

                if ($(this).parent('.folderHeirarchyList').hasClass('active')) {
                    $(this).find('.arrow').removeClass('glyphicon-triangle-right').addClass('glyphicon-triangle-bottom');
                } else {
                    $(this).find('.arrow').removeClass('glyphicon-triangle-bottom').addClass('glyphicon-triangle-right');
                }
            }else{
                // $(this).css('color','red');
            }

        });

    }
.mainFolderHeirarchy li {
  border: none;
  background: 0 0!important
}

.mainFolderHeirarchy li a {
  color: #000;
  text-decoration: none!important
}

.mainFolderHeirarchy li a:hover {
  text-decoration: none!important
}

.mainFolderHeirarchy .folderHeirarchyList {
  padding-top: 3px;
  padding-bottom: 3px
}

.mainFolderHeirarchy .folderHeirarchyList.active>.subFolderHeirarchy {
  display: block
}

.mainFolderHeirarchy .folderHeirarchyList .subFolderHeirarchy {
  display: none;
  padding-left: 5px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

    <h1> Folder Heirarchy/ multi level list item</h1>
    <hr />
    <ul class="list-group mainFolderHeirarchy">
            <li class="list-group-item folderHeirarchyList">
                <a href="#" class="labelWrapper"><span class="arrow glyphicon glyphicon-triangle-right"></span><span class="listlabel">listitem</span> </a>
                <ul class="subFolderHeirarchy">
                    <li class="list-group-item folderHeirarchyList">
                        <a href="#" class="labelWrapper"><span class="arrow glyphicon glyphicon-triangle-right"></span><span class="listlabel">listitem</span> </a>
                        <ul class="subFolderHeirarchy">
                            <li class="list-group-item folderHeirarchyList">
                                <a href="#" class="labelWrapper"><span class="arrow glyphicon glyphicon-triangle-right"></span><span class="listlabel">listitem</span> </a>
                            </li>
                            <li class="list-group-item folderHeirarchyList">
                                <a href="#" class="labelWrapper"><span class="arrow glyphicon glyphicon-triangle-right"></span><span class="listlabel">listitem</span> </a>
                                <ul class="subFolderHeirarchy">
                                    <li class="list-group-item folderHeirarchyList">
                                        <a href="#" class="labelWrapper"><span class="arrow glyphicon glyphicon-triangle-right"></span><span class="listlabel">listitem</span> </a>
                                    </li>
                                    <li class="list-group-item folderHeirarchyList">
                                        <a href="#" class="labelWrapper"><span class="arrow glyphicon glyphicon-triangle-right"></span><span class="listlabel">listitem</span> </a>
                                        <ul class="subFolderHeirarchy">
                                    <li class="list-group-item folderHeirarchyList">
                                        <a href="#" class="labelWrapper"><span class="arrow glyphicon glyphicon-triangle-right"></span><span class="listlabel">listitem</span> </a>
                                    </li>
                                    <li class="list-group-item folderHeirarchyList">
                                        <a href="#" class="labelWrapper"><span class="arrow glyphicon glyphicon-triangle-right"></span><span class="listlabel">listitem</span> </a>
                                        <ul class="subFolderHeirarchy">
                                    <li class="list-group-item folderHeirarchyList">
                                        <a href="#" class="labelWrapper"><span class="arrow glyphicon glyphicon-triangle-right"></span><span class="listlabel">listitem</span> </a>
                                        <ul class="subFolderHeirarchy">
                                    <li class="list-group-item folderHeirarchyList">
                                        <a href="#" class="labelWrapper"><span class="arrow glyphicon glyphicon-triangle-right"></span><span class="listlabel">listitem</span> </a>
                                    </li>
                                    <li class="list-group-item folderHeirarchyList">
                                        <a href="#" class="labelWrapper"><span class="arrow glyphicon glyphicon-triangle-right"></span><span class="listlabel">listitem</span> </a>
                                    </li>
                                </ul>
                                    </li>
                                    <li class="list-group-item folderHeirarchyList">
                                        <a href="#" class="labelWrapper"><span class="arrow glyphicon glyphicon-triangle-right"></span><span class="listlabel">listitem</span> </a>
                                    </li>
                                </ul>
                                    </li>
                                </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li class="list-group-item folderHeirarchyList">
                        <a href="#" class="labelWrapper"><span class="arrow glyphicon glyphicon-triangle-right"></span><span class="listlabel">listitem</span> </a>
                    </li>
                </ul>
            </li>
        </ul>

于 2016-06-14T01:54:08.647 に答える