Procurando muitas implementações de árvores na Internet, sempre sinto que não é satisfatório. Você precisa fazer referência a arquivos externos JS para usar plug-ins ou muito código deixa as pessoas tontos. Na verdade, eu só quero implementar uma árvore com código conciso e lógica não complexa. Não quero dizer muito e apenas ir ao código:
1. Primeiro, escreva o estilo CSS, o cabeçalho que deve ser escrito é renderizado pela primeira vez
A cópia do código é a seguinte:
<estilo>
.ps {margin-left: 10px; display: nenhum;}
.f {
Antecedentes: URL ("Add.gif") sem repetição de rolagem -4px -21px;
Cursor: Ponteiro;
Altura: 35px;
altura de linha: 37px;
Potding-Left: 20px;
}
</style>
2. Adicione o conteúdo específico da árvore ao corpo principal da página. Esse conteúdo também pode ser exibido dinamicamente (a tela dinâmica é fácil de implementar, desde que seja baseada nas regras, para que não há necessidade de dizer. Sorria)
A cópia do código é a seguinte:
<div id = "sgc1"> modificação de senha </div>
<div id = "sgc2"> seleção do produto </div>
<div id = "sgc3" onclick = "w ('gc3')"> configurações de classificação </div>
<div id = "gc3" style = "display: nenhum">
<div id = "sfgc91" onclick = "k ('fgc91')"> deve ver </div>
<div id = "FGC91">
<div> Defina produtos MustSee </div>
</div>
<div id = "sfgc93" onclick = "k ('fgc93')"> spotlight </div>
<div id = "FGC93">
<div> Defina produtos de destaque </div>
</div>
<div id = "sfgc94" onclick = "k ('fgc94')"> especialidades diárias </div>
<div id = "FGC94">
<div> Defina produtos da DailySpecials </div>
</div>
<div id = "sfgc95" onclick = "k ('fgc95')"> hotcategory </div>
<div id = "FGC95">
<div> Defina a classificação HotCategory </div>
<div> Defina produtos HotCategory </div>
</div>
<div id = "sfgc96" onclick = "k ('fgc96')"> picaretas quentes e legais </div>
<div id = "FGC96">
<div> Defina produtos de escolhas quentes e legais </div>
</div>
<div id = "sfgc97" onclick = "k ('fgc97')"> em destaquecategorie </div>
<div id = "FGC97">
<div> Conjunto de categorias em destaque </div>
<div> Conjunto de categorias em destaque </div>
</div>
<div id = "sfgc98" onclick = "k ('fgc98')"> você também pode gostar ... </div>
<div id = "FGC98">
<div> Conjunto que você também pode gostar ... categoria </div>
<div> Conjunto que você também pode gostar ... Produto </div>
</div>
</div>
<div id = "sgc4" onclick = "w ('gc4')"> configurações do sistema </div>
<div id = "gc4" style = "display: nenhum">
<div> Gerenciamento de usuário </div>
</div>
3. O destaque está aqui, preste atenção aos mesmos sapatos e depois implemente o controle de árvores de JS
A cópia do código é a seguinte:
função w (vd) {
var ob = document.getElementById (VD);
if (ob.style.display == "bloco" || ob.style.display == "") {
ob.style.display = "nenhum";
var ob2 = document.getElementById ('s' + vd);
ob2.style.background = "url (add.gif) -4px -21px sem repetição";
}
outro {
ob.style.display = "bloco";
var ob2 = document.getElementById ('s' + vd);
ob2.style.background = "url (add.gif) -4px 4px sem repetição;";
}
}
função k (vd) {
var ob = document.getElementById (VD);
if (ob.style.display == "block") {
ob.style.display = "nenhum";
var ob2 = document.getElementById ('s' + vd);
ob2.style.background = "url (add.gif) -4px -21px sem repetição";
}
outro {
ob.style.display = "bloco";
var ob2 = document.getElementById ('s' + vd);
ob2.style.background = "url (add.gif) -4px 4px sem repetição;";
}
}
4. O diagrama de exemplo em execução é o seguinte: