HTML 中的树状选择
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1232073/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Tree-like Select in HTML
提问by Greg
I'm trying to create a tree-like <select>using HTML and CSS.
我正在尝试<select>使用 HTML 和 CSS创建一个树状结构。
To maintain accessibility I'd like to avoid javascript if possible.
I'd also like to avoid using instead of padding, as this prevents pressing letter keys to jump to items.
为了保持可访问性，我想尽可能避免使用 javascript。我还想避免使用 而不是填充，因为这可以防止按字母键跳转到项目。
What I have so far is this:
到目前为止，我所拥有的是：
<select>
<optgroup label="fluffy" style="padding-left: 10px;"></optgroup>
<optgroup label="kitties" style="padding-left: 20px;"></optgroup>
<option value="1" style="padding-left: 30px;">Fluffykins</option>
<option value="2" style="padding-left: 30px;">Mr Pooky</option>
<optgroup label="puppies" style="padding-left: 20px;"></optgroup>
<option value="3" style="padding-left: 30px;">Doggins</option>
<optgroup label="not fluffy" style="padding-left: 10px;"></optgroup>
<optgroup label="snakes" style="padding-left: 20px;"></optgroup>
<option value="4" style="padding-left: 30px;">Fingers</option>
<optgroup label="crabs" style="padding-left: 20px;"></optgroup>
<option value="5" style="padding-left: 30px;">Lucky (AKA Citizen Snips)</option>
</select>
This works fine in Firefox, but IE ignores the padding, rendering it as a flat list (quite hard to use) and Chrome doesn't render the <optgroup>s, which are technically not valid as an <optgroup>is supposed to contain at least on <option>.
这在 Firefox 中工作正常，但 IE 忽略了填充，将其呈现为平面列表（很难使用）并且 Chrome 不呈现<optgroup>s，这在技术上<optgroup>是无效的，因为 s应该至少包含<option>.
Unfortunately <optgroup>s can't be nested.
不幸的是<optgroup>s 不能嵌套。
回答by inf3rno
With the SELECT element it will not work. You can create a custom SELECT based on this:
使用 SELECT 元素它将不起作用。您可以基于此创建自定义 SELECT：
css:
css：
* {
margin: 0;
padding: 0;
}
.select, .select-tree {
border: 1px solid black;
width: 200px;
overflow: hidden;
list-style-type: none;
margin: 10px;
}
.select .group-label {
background-color: white;
}
.select .option-label {
background-color: white;
display: block;
}
.select .hidden-checkbox {
display: none;
}
.select .hidden-checkbox:checked + .option-label,
.select-tree .hidden-checkbox:checked ~ .group-children,
.select-tree .hidden-checkbox:checked ~ .group-children * {
background-color: lightblue;
}
.select-tree .group-children {
list-style-type: none;
padding-left: 20px;
}
.select-tree .option-label {
padding-left: 5px;
}
.select-list .level-0 {
padding-left: 10px;
}
.select-list .level-1 {
padding-left: 20px;
}
.select-list .level-2 {
padding-left: 30px;
}
html:
html：
select many from list (groups not selectable):
从列表中选择多个（组不可选择）：
<ol class="select select-list select-many">
<li>
<input name="list1[1]" type="checkbox" id="check1" class="hidden-checkbox"/>
<label for="check1" class="option-label level-0">option 1</label>
</li>
<li>
<span class="group-label level-0">group 1</span>
</li>
<li>
<input name="list1[2]" type="checkbox" id="check2" class="hidden-checkbox"/>
<label for="check2" class="option-label level-1">option 2</label>
</li>
<li>
<span class="group-label level-1">group 2</span>
</li>
<li>
<input name="list1[3]" type="checkbox" id="check3" class="hidden-checkbox"/>
<label for="check3" class="option-label level-2">option 3</label>
</li>
<li>
<input name="list1[4]" type="checkbox" id="check4" class="hidden-checkbox"/>
<label for="check4" class="option-label level-2">option 4</label>
</li>
<li>
<input name="list1[5]" type="checkbox" id="check5" class="hidden-checkbox"/>
<label for="check5" class="option-label level-0">option 5</label>
</li>
</ol>
select one from list (groups not selectable):
从列表中选择一个（组不可选择）：
<ol class="select select-list select-one">
<li>
<input name="list2" type="radio" id="check6" class="hidden-checkbox"/>
<label for="check6" class="option-label level-0">option 1</label>
</li>
<li>
<span class="group-label level-0">group 1</span>
</li>
<li>
<input name="list2" type="radio" id="check7" class="hidden-checkbox"/>
<label for="check7" class="option-label level-1">option 2</label>
</li>
<li>
<span class="group-label level-1">group 2</span>
</li>
<li>
<input name="list2" type="radio" id="check8" class="hidden-checkbox"/>
<label for="check8" class="option-label level-2">option 3</label>
</li>
<li>
<input name="list2" type="radio" id="check9" class="hidden-checkbox"/>
<label for="check9" class="option-label level-2">option 4</label>
</li>
<li>
<input name="list2" type="radio" id="check10" class="hidden-checkbox"/>
<label for="check10" class="option-label level-0">option 5</label>
</li>
</ol>
select one from tree (groups selectable):
从树中选择一个（可选择组）：
<ol class="select select-tree select-one">
<li>
<input name="tree1" type="radio" id="check11" class="hidden-checkbox"/>
<label for="check11" class="option-label">option 1</label>
</li>
<li>
<input name="tree1" type="radio" id="check12" class="hidden-checkbox"/>
<label for="check12" class="option-label group-label">group 1</label>
<ol class="group-children">
<li>
<input name="tree1" type="radio" id="check13" class="hidden-checkbox"/>
<label for="check13" class="option-label">option 2</label>
</li>
<li>
<input name="tree1" type="radio" id="check14" class="hidden-checkbox"/>
<label for="check14" class="option-label group-label">group 2</label>
<ol class="group-children">
<li>
<input name="tree1" type="radio" id="check15" class="hidden-checkbox"/>
<label for="check15" class="option-label">option 3</label>
</li>
<li>
<input name="tree1" type="radio" id="check16" class="hidden-checkbox"/>
<label for="check16" class="option-label">option 4</label>
</li>
</ol>
</li>
</ol>
</li>
<li>
<input name="tree1" type="radio" id="check17" class="hidden-checkbox"/>
<label for="check17" class="option-label">option 5</label>
</li>
</ol>
IE9+ only (and you have to give the doctype for msie)... I think you cannot do it without "level-x" css classes, because by nested divs the padding would offset the colored background of the label too...
仅限 IE9+（并且您必须为 msie 提供 doctype）...我认为如果没有“level-x”css 类，您就无法做到这一点，因为通过嵌套的 div，填充也会抵消标签的彩色背景...
By IE8- you have to use javascript to colorize the labels...
通过 IE8-您必须使用 javascript 为标签着色...
回答by random
As you've noted, you can't nest one OPTGROUPwithin another. But you do have to enclose them. This will achieve at least the base level of indenting you're not already seeing.
正如您所指出的，您不能将一个嵌套OPTGROUP在另一个中。但是您必须将它们附上。这将至少达到您尚未看到的缩进的基本水平。
<optgroup label="fluffy" style="padding-left: 10px;">
<optgroup label=" kitties" style="padding-left: 20px;">
<option value="1" style="padding-left: 30px;">Fluffykins</option>
<option value="2" style="padding-left: 30px;">Mr Pooky</option>
</optgroup>
<optgroup label=" puppies" style="padding-left: 20px;">
<option value="3" style="padding-left: 30px;">Doggins</option>
</optgroup>
</optgroup>
Since you can't jump to the OPTGROUPheadings with the keyboard anyway (and only to the actual OPTION), there should no problem padding the labelout with to work across the cross-browser issues on padding.
由于OPTGROUP无论如何您都无法使用键盘跳转到标题（并且只能跳转到实际的OPTION），因此填充label输出 应该没有问题以解决跨浏览器的填充问题。
回答by FrostbiteXIII
I assume margin-left doesn't do what you want either?
我假设 margin-left 也不会做你想要的？
回答by Oliver Hanappi
It is not a really good solution, but have you tried intending the elements with non breaking spaces (& nbsp;) ?
这不是一个很好的解决方案，但是您是否尝试过使用不间断空格 ( ) 的元素？
回答by ChrisBenyamin
You have to wrap the option-Tags with the optgroup-Tags.
您必须用 optgroup-Tags 包装 option-Tags。
It should look like this:
它应该是这样的：
<optgroup label="kitties" style="padding-left: 20px;">
<option value="1" style="padding-left: 30px;">Fluffykins</option>
<option value="2" style="padding-left: 30px;">Mr Pooky</option>
</optgroup>
<optgroup label="puppies" style="padding-left: 20px;">
<option value="3" style="padding-left: 30px;">Doggins</option>
</optgroup>
Hope it helps :)
希望能帮助到你 ：）
