HTML/CSS:嵌套元素树的布局比嵌套表更好的选择是什么？

Question

好的,我有一组用于选择标准的复选框.为了论证,我们会说数据看起来像这样:

[] Vehicles
   [] Unpowered
      [] Bicycle
      [] Skateboard
   [] Powered
      [] Two-wheeled
         [] Motorcycle
         [] Scooter
      [] Four-wheeled
etc

[]代表复选框.

忽略这个例子明显做作的本质,这个想法是这样的:

• 首先,只有"车辆"复选框可见;
• 如果用户点击"车辆"复选框,则操作上一级(有电,无电);
• 如果用户选择"动力",则打开下一级(两轮,四轮);
• 如果用户取消选中"已启动",则该级别将消失.

现在,使用onclick切换block和none之间的显示CSS属性相对容易.

目前在页面上构建如下:

<table>
<tr>
  <td><input type="checkbox" onclick="toggle('__Vehicles');"></td>
  <td>Vehicles
    <table id="__Vehicles">
    <tr>
      <td><input type="checkbox"></td>
      <td>Unpowered
etc

在有人问之前我应该​​指出:复选框放在表格单元格中的原因是为了控制格式.它使得有效缩进变得容易,因为下一个表格单元格中的所有内容都会排成一行.

一切正常,但表嵌套变得非常深.我一直认为必须有比这更好的方法.它必须能够轻松动态构建,并具有良好的跨浏览器支持格式化"树".

我还应该提一下jQuery是可用的.我正在将它用于其他事情.

建议？

编辑:是的复选框样式很重要,因为有几条评论已经注意到.另外,我已经根据我得到的回复发布了一个解决方案,作为下面的答案(太大了,不能在这里添加),只是为那些好奇的人看到一个例子.

Answer 1

<ul>
    <li><input type="checkbox" />Vehicles <ul>
        <li><input type="checkbox" />Unpowered</li>
        <li><input type="checkbox" />Bicycle</li>
        <li><input type="checkbox" />Skateboard</li>
    </ul></li>
    <li><input type="checkbox" />Powered <ul>
        <li><input type="checkbox" />Two-wheeled <ul>
            <li><input type="checkbox" />Motorcycle</li>
            <li><input type="checkbox" />Scooter</li>
        </ul></li>
        <li><input type="checkbox" />Four-wheeled</li>
     </ul></li>
</ul>

编辑:一个小css&js来显示和隐藏嵌套元素(没有复选框)

li.opened ul {
display: block;
}

li.closed ul {
    display: none;
}

和js ......

$(document).ready(function() {

$('li input:checkbox').click(function () {
    $(this).parent().toggleClass('opened');
    $(this).parent().toggleClass('closed');
});

$('li').addClass('closed');
});

再次编辑,因为Sparr想要一些更好的样式(假设复选框的样式为"复选框"

li input.checkbox { /* input:checkbox is not 100% compatible */
    width: 6px;
    margin: 0 2px;
    /* This makes 10px be the total "width" ofh the checkbox */
}

ul {
    margin: 0 0 0 10px; /* Or whatever your total checkbox width is */
    padding: 0;
}

li {
    padding: 0;
}

Answer 2

你可以这样做:

<ul>
  <li>
    <input type="checkbox" /> Option 1
    <ul>
      <li><input type="checkbox" /> Option 1 Sub Option A</li>
    </ul>
  </li>
</ul>

然后,您将UL的填充/边距设置为0和0.然后将LI的填充左侧设置为10px.

ul {
  margin:0;
  padding:0;
}

li {
  margin:0;
  padding:0 0 0 20px; /* Each nested li will be padded incrementally */
}

对于javascript,将事件附加到每个复选框,以确定兄弟UL(如果存在)是否应该可见.如果选中该框,则显示该框,否则将其隐藏.