javascript - 根据容器内展开组件的数量自动调整可折叠树中的文本大小

Question

嘿，我正在编写一段代码来使用复选框创建可展开/可折叠的树。我已经把这部分写下来了，但我想让它展开得越多，文本就越小，这样用户就不需要滚动来查看所有展开的分支。我遇到了 jQuery 插件 TextFill，但无法完全让它按照我想要的方式工作(甚至不确定它是否与我正在做的事情兼容)。

所以，这是代码片段

/*better tree view*/
 html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-size: 40px;
    line-height: 50px;
}
/*kingdom*/
 html .kingdom, body .kingdom {
    color: #0000ff;
}
html .kingdom:hover, body .kingdom:hover {
    background-color: #0000ff;
}
li .kingdom + input[type=checkbox] + ul > li {
    display: none;
}
li .kingdom + input[type=checkbox]:checked + ul > li {
    display: block;
}
/*phylum*/
 html .phylum, body .phylum {
    color: #ff0000;
}
html .phylum:hover, body .phylum:hover {
    background-color: #ff0000;
}
html .class, body .class {
    color: #008000;
}
html .class:hover, body .class:hover {
    background-color: #008000;
}
html .order, body .order {
    color: #800080;
}
html .order:hover, body .order:hover {
    background-color: #800080;
}
html .family, body .family {
    color: #ffa500;
}
html .family:hover, body .family:hover {
    background-color: #ffa500;
}
html .genus, body .genus {
    color: #ffc0cb;
}
html .genus:hover, body .genus:hover {
    background-color: #ffc0cb;
}
html .subgenus, body .subgenus {
    color: #a52a2a;
}
html .subgenus:hover, body .subgenus:hover {
    background-color: #a52a2a;
}
html .species, body .species {
    color: #000000;
}
html .species:hover, body .species:hover {
    background-color: #000000;
}
html .subspecies, body .subspecies {
    color: #808080;
}
html .subspecies:hover, body .subspecies:hover {
    background-color: #808080;
}
.treeview {
    float: left;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.treeview:hover input ~ label:before, .treeview.hover input ~ label:before {
    opacity: 1.0;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
.treeview ul {
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -ms-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
    list-style: none;
    padding-left: 1em;
}
.treeview ul li span {
    -webkit-transition-property: color;
    -moz-transition-property: color;
    -ms-transition-property: color;
    -o-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -ms-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
}
.treeview ul li span:hover {
    color: white;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -ms-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
}
.treeview input {
    display: none;
    /*arrow thing*/
}
.treeview input ~ label {
    cursor: pointer;
}
.treeview input ~ label:before {
    content:'';
    width: 0;
    height: 0;
    position: absolute;
    margin-left: -1em;
    margin-top: 0.4em;
    border-width: 5px;
    border-style: solid;
    border-top-color: black;
    border-right-color: black;
    border-bottom-color: transparent;
    border-left-color: transparent;
    opacity: 0.0;
    -webkit-transition-property: opacity;
    -moz-transition-property: opacity;
    -ms-transition-property: opacity;
    -o-transition-property: opacity;
    transition-property: opacity;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -ms-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
}
.treeview input:checked ~ label:before {
    margin-left: -0.8em;
    border-width: 5px;
    border-top-color: transparent;
    border-right-color: black;
    border-bottom-color: black;
    border-left-color: transparent;
}
input + label + ul {
    display:none;
}
input:checked + label + ul {
    display:block;
}

    <div class="treeview hover">
  <ul>
    <li>
       <input type="checkbox" id="cbanimalia"/>
      <label class="kingdom" for="cbanimalia">
          <span>Animalia</span>
          </label>
    <ul>
        <li>
            <input type="checkbox" id="cbchordata" />
            <label class="phylum" for="cbchordata"> <span>Chordata</span>
            </label>
            <ul>
                <input type="checkbox" id="cbmammalia" />
                <label class="class" for="cbmammalia"> <span>Mammalia</span>
                </label>
                <ul>
                    <input type="checkbox" id="cbcarnivora" />
                    <label class="order" for="cbcarnivora"> <span>Carnivora</span>
                    </label>
                    <ul>
                        <input type="checkbox" id="cbcarnidae" />
                        <label class="family" for="cbcarnidae"> <span>Carnidae</span>
                        </label>
                        <ul>
                            <input type="checkbox" id="cbcanis" />
                            <label class="genus" for="cbcanis"> <span>Canis</span>
                            </label>
                            <ul>
                                <input type="checkbox" id="cbspecies" />
                                <label class="species" for="cbspecies"> <span><i>Canis lupis</i></span>
                                </label>
                                <ul>
                                    <li><a href="http://thegrassisstillgreen.weebly.com/animal-count--domestic-dog.html"><label class="subspecies"><span><i>Canis lupis familiaris</i></span></label></li></a>

                                </ul>
                            </ul>
                        </ul>
                    </ul>
                    <li>
                        <input type="checkbox" id="cbrodentia" />
                        <label class="order" for="cbrodentia"> <span>Rodentia</span>
                        </label>
                        <ul>
                            <input type="checkbox" id="cbsciuridae" />
                            <label class="family" for="cbsciuridae"> <span>Sciuridae</span>
                            </label>
                            <ul>
                                <input type="checkbox" id="cbsciuris" />
                                <label class="genus" for="cbsciuris"> <span>Sciuris</span>
                                </label>
                                <ul>
                                    <input type="checkbox" id="cbsciuris2" />
                                    <label class="subgenus" for="cbsciuris2"> <span>Sciuris</span>
                                    </label>
                                    <ul>
                                        <li><a href="http://thegrassisstillgreen.weebly.com/animal-count--red-squirrel.html"><label class="species"><span><i>Sciuris vulgaris</i></span></label></a>
                                        </li>
                                    </ul>
                                </ul>
                            </ul>
                        </ul>
                    </li>
                </ul>
            </ul>
        </li>
        </ul>
      </li>
    </ul>
</div>

我已经为此工作了一段时间 - 任何帮助将不胜感激!

顺便说一句，我的代码可能看起来非常糟糕且无组织，因为我对此还很陌生。我几乎就是把一堆不同的碎片拼凑在一起的弗兰肯斯坦。 :p

感谢您的宝贵时间，希望你们能解决这个问题!

Answer 1

如果您可以使用 JavaScript，这将根据可折叠树中单击的元素的深度来更改字体大小。

您可以通过调整字体大小方程来调整“收缩”量。更改初始字体大小、乘数或最小值以满足您的需要。

$("label").click(function (element) {
    var depth = $(this).parents().length;
    // Font size of 8 will be the minimum:
    var fontSize = Math.max(40 - depth * 2, 8);
    $(".treeview.hover li").css({
        "font-size": fontSize
    });
});

http://jsfiddle.net/umc2vjw1/