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，这将根据在可折叠树中单击的项目的深度更改字体大小。

你可以调整＆＃34;收缩量＆＃34;通过调整字体大小方程。更改初始字体大小，乘数或最小值以满足您的需求。

$("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/

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

1 个答案: