В поисках много реализаций деревьев в Интернете, я всегда чувствую, что это не удовлетворительно. Либо вам нужно ссылаться на внешние файлы JS для использования плагинов, либо слишком много кода заставляет людей головокружение. На самом деле, я просто хочу реализовать дерево с кратким кодом и логикой нерепласти. Я не хочу много говорить и просто ходить в код:
1. Сначала напишите стиль CSS, заголовок, который должен быть написан
Кода -копия выглядит следующим образом:
<style>
.ps {margin-left: 10px; дисплей: нет;}
.f {
Фон: url ("add.gif") без повторного прокрутки -4px -21px;
курсор: указатель;
Высота: 35px;
высота линии: 37px;
Лебь накладки: 20px;
}
</style>
2. Добавьте конкретное содержание дерева в основной корпус страницы. Этот контент также может отображаться динамически (динамический дисплей легко реализовать, если он основан на правилах, поэтому нет необходимости говорить об этом. Улыбка)
Кода -копия выглядит следующим образом:
<div id = "sgc1"> изменение пароля </div>
<div id = "sgc2"> выбор продукта </div>
<div id = "sgc3" onclick = "w ('gc3')"> Настройки классификации </div>
<div id = "gc3" style = "display: none">
<div id = "sfgc91" onclick = "k ('fgc91')"> должен видеть </div>
<div id = "fgc91">
<div> Установить продукты Mustsee </div>
</div>
<div id = "sfgc93" onclick = "k ('fgc93')"> Spotlight </div>
<div id = "fgc93">
<div> установить продукты Spotlight </div>
</div>
<div id = "sfgc94" onclick = "k ('fgc94')"> ежедневные специальные предложения </div>
<div id = "fgc94">
<div> Установить продукты Dailyspecials </div>
</div>
<div id = "sfgc95" onclick = "k ('fgc95')"> hotcategory </div>
<div id = "fgc95">
<div> Установить классификацию HotCategory </div>
<div> Установите продукты HotCategory </div>
</div>
<div id = "sfgc96" onclick = "k ('fgc96')"> горячие и крутые выборы </div>
<div id = "fgc96">
<div> Установить горячие и прохладные продукты </div>
</div>
<div id = "sfgc97" onclick = "k ('fgc97')"> infedcategorie </div>
<div id = "fgc97">
<div> set kefuledcategories </div>
<div> set kefuledcategories </div>
</div>
<div id = "sfgc98" onclick = "k ('fgc98')"> вам также может понравиться… </div>
<div id = "fgc98">
<div> Установить, вам также может понравиться… категория </div>
<div> Установить, вам также может понравиться… продукт </div>
</div>
</div>
<div id = "sgc4" onclick = "w ('gc4')"> настройки системы </div>
<div id = "gc4" style = "display: none">
<div> Управление пользователями </div>
</div>
3. Основной момент здесь, обратите внимание на одну и ту же обувь, а затем реализуйте управление деревами JS
Кода -копия выглядит следующим образом:
функция w (vd) {
var ob = document.getelementbyid (vd);
if (ob.style.display == "block" || ob.style.display == "") {
ob.style.display = "нет";
var ob2 = document.getElementbyId ('s' + vd);
ob2.style.background = "url (add.gif) -4px -21px без повторения";
}
еще {
ob.style.display = "block";
var ob2 = document.getElementbyId ('s' + vd);
ob2.style.background = "url (add.gif) -4px 4px no -repeat;";
}
}
функция k (vd) {
var ob = document.getelementbyid (vd);
if (ob.style.display == "block") {
ob.style.display = "нет";
var ob2 = document.getElementbyId ('s' + vd);
ob2.style.background = "url (add.gif) -4px -21px без повторения";
}
еще {
ob.style.display = "block";
var ob2 = document.getElementbyId ('s' + vd);
ob2.style.background = "url (add.gif) -4px 4px no -repeat;";
}
}
4. Работающий пример диаграмма заключается в следующем: