Question

js特效实现+号展开，鼠标点击后+旋转到×号，点击后可以收缩关闭

Answer 1

	<div>标题 <span onclick="Cmd(this);">+</span></div>
	<div id="div1" style="display:none;border:1px solid red;width:150px;height:200px;">
		内容
	</div>
	<script>
		function Cmd(v){
			var div1 = document.getElementById("div1");
			if(div1.style.display == "none"){
				div1.style.display = "block";
				v.innerHTML = "X";
			}
			else{
				div1.style.display = "none";
				v.innerHTML = "+";
			}
		}
	</script>

如上代码可以实现，这是一个简单的方法，或者说是投机取巧的方法，如果想要+号和X号漂亮点，换成两张图片就OK了，不要跟我说你不会换啊  0.0

追问

能高级点儿不，这个显示隐藏太简陋了。。。这-_ -||起码来个动画吧

追答

实现思路已经给你了，剩下的就很简单了。图片网上搜两个动态的GIF图片换上就OK。显示和隐藏做成动态的可以使用jquery的slideUp和slideDown方法。

我还是改一下吧，不过我还是希望你能自己能写出来。

需要自己下载一下jquery的js文件，需要找两张GIF图片，我实在找不到了。。。

<div>标题 <img src="1.gif" id="img1" /></div>
<div id="div1" style="display:none;border:1px solid red;width:150px;height:200px;">
    内容
</div>
<script src="jquery-1.4.1.min.js" type="text/javascript"></script>
<script>
    $(document).ready(function(){
$("#img1").toggle(function(){
$(this).attr("src","2.gif");
$("#div1").slideDown();
},
function(){
$(this).attr("src","1.gif");
$("#div1").slideUp();
});
});
</script>