Создание дерева CSS с divs

Я пытаюсь создать этот эффект: http://www.thecssninja.com/demo/css_tree/ Проблема, с которой я сталкиваюсь, заключается в том, что код, с которым я работаю только с выходами с div. Так что нет ol/ul. Я не уверен, как это сделать. Вот отрывок кода, я работаю с:Создание дерева CSS с divs

<div class="jr_fieldDiv jr_exteriortype" style=""> 
    <label class="jrLabel">Exterior type</label> 
    <div class="jr_fieldOption"> 
     <input type="checkbox" name="data[Field][Listing][jr_exteriortype][]" 
     id="jr_exteriortype_brick" data-click2add="0" value="brick">&nbsp;Brick</div> 
    <div class="jr_fieldOption"> 
     <input type="checkbox" name="data[Field][Listing][jr_exteriortype][]" 
     id="jr_exteriortype_cement-concrete" data-click2add="0" value="cement-concrete">&nbsp;Cement/Concrete</div> 
    <div class="jr_fieldOption"> 
     <input type="checkbox" name="data[Field][Listing][jr_exteriortype][]" 
     id="jr_exteriortype_composition" data-click2add="0" value="composition">&nbsp;Composition</div> 
    <div class="jr_fieldOption"> 
     <input type="checkbox" name="data[Field][Listing][jr_exteriortype][]" 
     id="jr_exteriortype_metal" data-click2add="0" value="metal">&nbsp;Metal</div> 
    <div class="jr_fieldOption"> 
     <input type="checkbox" name="data[Field][Listing][jr_exteriortype][]" 
     id="jr_exteriortype_shingle" data-click2add="0" value="shingle">&nbsp;Shingle</div> 
    <div class="jr_fieldOption"> 
     <input type="checkbox" name="data[Field][Listing][jr_exteriortype][]" 
     id="jr_exteriortype_stone" data-click2add="0" value="stone">&nbsp;Stone</div> 
    <div class="jr_fieldOption"> 
     <input type="checkbox" name="data[Field][Listing][jr_exteriortype][]" 
     id="jr_exteriortype_stucco" data-click2add="0" value="stucco">&nbsp;Stucco</div> 
    <div class="jr_fieldOption"> 
     <input type="checkbox" name="data[Field][Listing][jr_exteriortype][]" 
     id="jr_exteriortype_vinyl" data-click2add="0" value="vinyl">&nbsp;Vinyl</div> 
    <div class="jr_fieldOption"> 
     <input type="checkbox" name="data[Field][Listing][jr_exteriortype][]" 
     id="jr_exteriortype_wood" data-click2add="0" value="wood">&nbsp;Wood</div> 
    <div class="jr_fieldOption"> 
     <input type="checkbox" name="data[Field][Listing][jr_exteriortype][]" 
     id="jr_exteriortype_wood-products" data-click2add="0" value="wood-products">&nbsp;Wood Products</div> 
    <div class="jr_fieldOption"> 
     <input type="checkbox" name="data[Field][Listing][jr_exteriortype][]" 
     id="jr_exteriortype_other" data-click2add="0" value="other">&nbsp;Other</div> 
    <div class="clr"></div> 
</div>

источник

2012-03-26 Carl V

Я запутался, ваш код разрешает только divs? Загружаете ли вы содержимое через ajax в div с определенным именем? Если да, загрузите содержимое ol/ul через ajax. –

Это компонент с Joomla, поэтому я уверен, что можно загрузить ol/ul, просто не совсем уверен, где редактировать, чтобы сделать это возможным. Я думаю, что буду искать код. –

Хотя список был бы лучше, можно без проблем сделать это с дивами тоже. Это не имеет значения, его структура

<ul> 
    <li></li> 
    <li> 
     <ul> 
     <li></li> 
     </ul> 
    </li> 
</ul>

или

<div class="parent"> 
    <div class="child"></div> 
    <div class="child parent"> 
     <div class="child"></div> 
    </div> 
</div>

С некоторой помощью классов, вы можете легко стиль, как если бы вы имели ол/уль списочную структуру.

источник

2012-03-26 09:00:32 Christoph

Спасибо, Кристоф! Я ценю вашу помощь. –

@CarlV Добро пожаловать. Если это поможет вам решить проблему, вы можете принять ответ, нажав зеленую стрелку слева. Это означает, что вопрос решается другими пользователями. – Christoph

Ненавижу быть neusense Я пытаюсь выяснить, как CSS этот код. Я посмотрел на многочисленные сайты и не повезло. Мне нужна только одна родительская группа и одна дочерняя группа –

Вы должны override the template, что компонент использует.

источник

2012-03-27 13:20:30

Создание дерева CSS с divs

ответ

Смежные вопросы