搞了个CSS树节点ico，没有图片哦

来源：互联网发布：淘宝店铺如何解封编辑：程序博客网时间：2024/05/21 07:14

知道css中的border用法的一看就懂了。看一下代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>test</title><style type="text/css">body{margin:0px; padding:0px;}#arrow{width:12px; height:12px; border:1px solid #ccc; margin:50px;}#arrowOpen{visibility:hidden;}.closed{width:0px; height:0px; border-left:#060 6px solid; border-bottom:#fff 6px solid; border-top:#fff 6px solid;}.open{width:0px; height:0px; margin-top:-8px; margin-left:-1px; border-left:#fff 6px solid; border-right:#fff 6px solid; border-top:#060 6px solid;}</style><script type="text/javascript" src="jquery-1.7.js"></script><script type="text/javascript" language="javascript">$(document).ready(function(){//隐藏向右开的箭头$("#arrowClose").click(function(){if($(this).css("visibility")!="hidden"){$(this).css("visibility","hidden");$("#arrowOpen").css("visibility","visible");}})//隐藏向下开的箭头$("#arrowOpen").click(function(){if($(this).css("visibility")=="visible"){$(this).css("visibility","hidden");$("#arrowClose").css("visibility","visible");}})})</script></head><body><div id="arrow"><div id="arrowClose" class="closed"></div><div id="arrowOpen" class="open"></div></div></body></html>

给个demo下载地址