HTML/CSS: что такое более оптимальный вариант для расположения дерева вложенных элементов, чем вложенные таблицы?

Вы могли сделать это:

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

Вы затем установили дополнение/поле ул. к 0 и 0. Затем установите оставленный дополнению из LI к 10 пкс.

ul {
  margin:0;
  padding:0;
}

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

Для JavaScript присоедините событие к каждому флажку, который определяет, должна ли одноуровневая УЛ. (если любой существует) быть видима. Если флажок устанавливается, покажите его, еще, скройте его.

Я должен вмешаться, чтобы предложить, чтобы Вы извлекли JavaScript из своей разметки, в дополнение к предложениям выше. Пользуясь библиотекой, такой как lowpro (мой фаворит), можно создать 1 объект обработать вложенное поведение флажка и применить его автоматически, незаметно. Упаковка Вашего кода как это делает Вашу разметку легче поддержать, и Ваш код, легче и более быстрый для записи, более мощный, и более легко сохраняемый.

Вложенные незаказанные списки являются лучшей практикой для этого вида вещи.

<ul>
   <li>Item 1</li>
   <li>Item 2
      <ul>
         <li>Sub Item 1</li>
         <li>Sub Item 2</li>
         <li>Sub Item 3</li>
      </ul>
   </li>
   <li>Item 3</li>
   <li>Item 4
      <ul>
         <li>Sub Item 1</li>
         <li>Sub Item 2</li>
         <li>Sub Item 3</li>
      </ul>
   </li>
</ul>

Хотите видеть некоторое глубокое волшебство jQuery?

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

Примечание: единственное художественное оформление здесь является древовидным классом.

ul.tree {
    list-style-type: none;
    margin: 0 0 0 -22px;
    padding: 0;
}

ul.tree ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul.tree input {
    margin-right: 6px;
}

ul.tree li {
    padding: 0 0 0 22px;
    margin: 1px;
}

.closed ul {
    display: none;
}

и волшебство:

$(function() {
    $("ul.tree li:has(ul) > :checkbox").click(function() {
        jQuery(this).parent().toggleClass('closed');
    }).not(":checked").parent().addClass("closed");
});

Это превращает всю вещь в открытие работы и заключительное дерево, поскольку Вы нажимаете на флажки.Потрясающе.

Благодаря davethegr8, Jonathon Sampson и другим для совета.

В то время как плагин jQuery mcDropdown приближается к вложенной проблеме списка по-другому (никакие флажки), это может подойти для Ваших потребностей.

Таблицы для табличных данных. Используйте вложенные списки вместо этого и CSS для форматирования.

При поиске полного решения вот один использующий чистый CSS для современных браузеров и JavaScript для IE:

<style>
ul.tree, ul.tree ul {
    position: relative;
    list-style: none;
    margin: 0 0 0 20px;
    padding: 0;
}
ul.tree input {
    position: absolute;
    margin-left: -20px;
}
ul.tree ul {
    display: none;
}
ul.tree input:checked ~ ul {
    display: block;
}
ul.tree label:hover {
    text-decoration: underline;
}
</style>
<ul class="tree">
  <li>
    <input type="checkbox" id="option1">
    <label for="option1">Option 1</label>
    <ul>
      <li>
       <input type="checkbox" id="option1a">
       <label for="option1a">Option 1 Sub Option A</label>
      </li>
      <li>
       <input type="checkbox" id="option1b">
       <label for="option1b">Option 1 Sub Option B</label>
      </li>
    </ul>
  </li>
  <li>
   <input type="checkbox" id="option2">
   <label for="option2">Option 2</label>
  </li>
</ul>
<!--[if lte IE 7]>
<script>
var tree = document.getElementsByTagName('ul')[0];
tree.attachEvent('onclick', function() {
    var src = event.srcElement;

    if(src.nodeName.toLowerCase() === 'label')
        var box = document.getElementById(src.htmlFor);
    else if(src.nodeName.toLowerCase() === 'input')
        var box = src;
    else return;

    for(var current = src.nextSibling;
        current && current.nodeName.toLowerCase() !== 'ul';
        current = current.nextSibling);

    if(current)
        current.style.display = box.checked ? 'block' : 'none';
});
</script>
<![endif]-->

Предполагает, что флажок не более широк это 20px.

когда создание cb's дает им класс CSS в зависимости от уровня

<input class="LevelXcb" type="checkbox" />

CSS:

.Level0cb{left:4px;}
.Level1cb{left:16px;}
.Level2cb{left:28px;}

если "оставлено" не работает, пытаются установить "оставленный полю".

Я знаю, что это не очень связано с вопросом, поэтому не голосуйте, просто предложение.

В этом примере от davethegr8:

<ul>
    <li>Vehicles <ul>
        <li>Unpowered</li>
        <li>Bicycle</li>
        <li>Skateboard</li>
    </ul></li>
    <li>Powered <ul>
        <li>Two-wheeled <ul>
            <li>Motorcycle</li>
            <li>Scooter</li>
        </ul></li>
        <li>Four-wheeled</li>
     </ul></li>
</ul>

Если Вы даете каждому шагу класс, можно использовать jQuery для создания некоторых прохладных выпадающих эффектов с по щелчку:

Как

$("li.Two-wheeled").click(function(event){
   $("div.main_wrapper ul.Moto_or_scooter:hidden").slideDown("slow");
}

Просто небольшое предложение, хотя :)

Если ширина флажков является все еще проблемой (после того, как все предыдущие ответы...), Вы можете также:

• Поместите все флажки в фиксированное с полем, таким образом, Вы знаете точно, где текст начинается (и следующий флажок уровня)
• Используйте некоторые вычисления jQuery для получения, ширина и установить поля других элементов динамично (кажется слишком хотя...),

Используя предложенную вложенную структуру списка, очевидно.