Что такое дерево в веб -дизайне? Проще говоря, нажмите на ссылку, разверните нижний каталог, а затем нажмите на нее, чтобы присоединиться. Это самое простое дерево. Как его реализовать? Это также очень просто. В CSS есть дисплей свойств. Это может контролировать реальность контента, но он все еще не отображается. Затем вы можете контролировать свойства CSS через JS., См. Следующий код:
<div> Top Directory </div>
<div id = menuist>
<div> Меню 1 </div>
<div> Меню 2 </div>
<div> Меню 3 </div>
</div>
Это считается прототипом дерева. Конечно, начальное состояние добавляет атрибут дисплея CSS. Наиболее часто используемые атрибуты дисплея - это ни один и атрибуты блока.
Ни один не отображается, а блок отображается как элемент типа блока. Затем посмотрите на код
<div> Top Directory </div>
<div id = menustist style = display: none>
<div> Меню 1 </div>
<div> Меню 2 </div>
<div> Меню 3 </div>
</div>
Таким образом, если вы запустите страницу, вы отобразите только каталог верхнего уровня. Если вы контролируете его, вам нужно добавить код JS.
1. Сначала получите меналист
var menuist = document.getElementbyId (меналистик);
2. или вы можете контролировать его свойства CSS после этого объекта
menust.shyle.display = block;
Добавить суждение
if (menuist.style.display = none)
menust.shyle.display = block;
еще
menust.shyle.display = нет;
Таким образом, создается самое оригинальное дерево, окончательный код
<Скрипт>
Функция Showmenu ()
{
var menuist = document.getElementbyId (меналистик);
if (menuist.style.display == нет)
menust.shyle.display = block;
еще
menust.shyle.display = нет;
}
</script>
<div on
click = showmenu ();> Top Directory </div>
<div id = menustist style = display: none>
<div> Меню 1 </div>
<div> Меню 2 </div>
<div> Меню 3 </div>
</div>
В течение долгого времени я делал каталоги атрибутов в соответствии с этим методом. Независимо от того, насколько сложным является каталог, этот метод был опробован и проверен. Следующий скриншот - это операционный эффект относительно сложного каталога деревьев, который я сделал в соответствии с IE:
Страшная вещь произошла под хромом, и это было полностью испорчено. После некоторого поиска информации я наконец нашел причину. В дополнение к блоку и ни одному, дисплей имеет много других атрибутов. Блок отображается в блоках. Я был заложен на это в столе. Бог знает, имеют ли стол и блок глубокую ненависть. Microsoft подумала, что это умно игнорировать их ненависть, в то время как Chrome по -прежнему честно подчинялся стандартам. Firefox такой же, поэтому в их объяснениях все еще есть проблемы. Как решить эту проблему:
Display также имеет табличную клетку свойств, что означает рендеринг содержимого в виде таблицы. Это точно соответствует моему использованию таблицы для макета. Ниже приведено совместимое рендеринг трех браузеров:
IE6
Chrome2
Firefox3.5