O que é uma árvore em web design? Simplificando, clique em um link, expanda o diretório inferior e clique nele para entrar. Esta é a árvore mais simples. Como implementá -lo? Também é muito simples. Existe uma exibição de propriedade no CSS. Isso pode controlar a realidade do conteúdo, mas ainda não exibe. Em seguida, você pode controlar as propriedades do CSS através do JS., Consulte o seguinte código:
<div> diretório superior </div>
<div id = menulista>
<div> menu 1 </div>
<div> menu 2 </div>
<div> menu 3 </div>
</div>
Este é considerado um protótipo da árvore. Obviamente, o estado inicial adiciona o atributo de exibição do CSS. Os atributos de exibição mais usados são nenhum e os atributos de bloco.
Nenhum não é exibido, enquanto o bloco é exibido como um elemento do tipo bloco. Em seguida, olhe para o código
<div> diretório superior </div>
<div id = estilo menulista = exibição: nenhum>
<div> menu 1 </div>
<div> menu 2 </div>
<div> menu 3 </div>
</div>
Dessa forma, se você executar a página, exibirá apenas o diretório de nível superior. Se você o controlar, precisará adicionar código JS.
1. Obtenha o menulista primeiro
var menulist = document.getElementById (menulista);
2. Ou você pode controlar suas propriedades CSS após este objeto
menulist.style.display = bloco;
Adicione julgamento
if (menulist.style.display = nenhum)
menulist.style.display = bloco;
outro
menulist.style.display = nenhum;
Dessa forma, a árvore mais original é gerada, o código final
<Cript>
função showmenu ()
{
var menulist = document.getElementById (menulista);
if (menulist.style.display == Nenhum)
menulist.style.display = bloco;
outro
menulist.style.display = nenhum;
}
</script>
<div on
clique = showmenu ();> diretório superior </div>
<div id = estilo menulista = exibição: nenhum>
<div> menu 1 </div>
<div> menu 2 </div>
<div> menu 3 </div>
</div>
Por um longo tempo, eu costumava fazer diretórios de atributos de acordo com esse método. Não importa o quão complexo o diretório seja feito, esse método foi testado e testado. A captura de tela a seguir é o efeito de operação de um diretório de árvores relativamente complexo que fiz no IE:
A coisa terrível aconteceu no Chrome e foi completamente confuso. Após algumas informações de recuperação de informações, finalmente encontrei o motivo. Além do bloco e nenhum, o Display possui muitos outros atributos. O bloco é exibido em blocos. Eu fui colocado em uma mesa. Deus sabe se a mesa e o bloco têm profundo ódio. A Microsoft achou que estava ignorando inteligentemente o ódio, enquanto o Chrome ainda obedeceu aos padrões com muita honestidade. O Firefox é o mesmo, então ainda existem problemas em suas explicações. Como resolver este problema:
A exibição também possui uma célula de tabela de propriedades, o que significa renderizar o conteúdo na forma de uma tabela. Isso está exatamente de acordo com o uso de uma tabela para layout. A seguir, é apresentada uma renderização compatível de três navegadores:
Ie6
Chrome2
Firefox3.5