本文介绍了如何使用CSS可以方便地控制对象的显示和隐藏属性的原理，使一棵树，做一棵树，这个css方法简单，代码比较小，所以写出来，供用户共享，这样在需要的时候也能做到。



大多数电子杂志使用树形目录。当鼠标单击主目录时，子目录被展开；当主目录再次单击时，子目录被关闭。

创建这个树目录有很多方法。最近，让我看看下面的示例：当我们在主目录下单击鼠标时，我们会拉下相应的子目录，然后单击它恢复原始状态。其效果与索电子杂志的目录效果完全相同。

制作方法：
我首先复制产生这种效果的代码如下，然后将代码与生成方法结合起来：
div id=小说风格=颜色：蓝onclick=文件。所有。孩子。风格。显示=（document.all.child1.style.display = = ''none）：''none '。
+主目录1
div id=孩子风格=显示：无
一个href =# 1子目录 / BR。
一个href =# 2子目录 / BR。
一个href =# 3子目录 / BR。
一个href =# 4 或子目录

div id=ASPstyle=颜色：蓝onclick=文件。所有。$child2。风格。显示=（document.all.child2.style.display = = ''none）：''none '。
+主目录2
div id=$child2风格=显示：无
一个href =# 1子目录 / BR。
一个href =# 2子目录 / BR。
一个href =# 3 或子目录

注意：字符空间
1、首先定义两个div，一个主目录，命名的小说，和其他相应的子目录，命名的孩子。2、主要的div写主目录+ 1，并在其上加载一个鼠标点击事件：我和一个小程序：所有的Javaｓｃｒｉｐｔ文件。。孩子。风格。显示=（document.all.child1.style.display = = ''none '）'：''none。本程序的作用是当鼠标点击div（主要是对+主目录1），如果孩子的div隐藏，让它显示；如果它是显示、隐藏。
3，写上孩子的div的子目录，并将其设置为超链接。在我的示例中，我设置了一个空链接。当我真的让我变成了真正的链接，让它指向链接的目标。一个CSS：风格=显示：没有添加到孩子的div定义，其目的是保持隐藏状态下的子目录开始。
其他目录的生产只是一个重复上面的三步。按F12看效果。该方法主要使用CSS属性显示：显示，它有一个特点，当对象是隐藏的，对象所占用的空间会自动给出了。我们知道，CSS也属性：能见度也有显示和隐藏对象的功能，但是不能用来做一棵树一样的目录上面。由于能见度隐藏对象和所占用的空间没有被释放的对象。即在子目录的子目录是隐藏的，位置是空白的，而位置不让出来，所以另一个主目录是无法关闭，只能用于地方的页面元素需要固定。