javascript 高手来帮帮忙呀。这段代码改成默认展开的,点击关闭。再点击可以展开那种。谢谢~
<style>#content{font:13px/25px;width:200px;height:40px;background:#eee;padding:10px;b...
<style>
#content{
font: 13px/25px;
width: 200px;
height: 40px;
background: #eee;
padding: 10px;
border: 4px #ccc double;
border-bottom:0;
overflow: hidden;
}
#key{color:#900;float:right}
</style>
<script>
var s=5;
var minheight=40;
var maxheight=300;
function shoppingcat(){
var key = document.getElementById("key").innerText;
if(key=="展开"){
content.style.pixelHeight+=s;
if(content.style.pixelHeight<maxheight){
setTimeout("shoppingcat();",1);
}else{
document.getElementById("key").innerText="关闭";
}
}else{
content.style.pixelHeight-=s;
if(content.style.pixelHeight>minheight){
setTimeout("shoppingcat();",1);
}else{
document.getElementById("key").innerText="展开";
}
}
}
</script>
<div id="content"> <span id="key" onclick="shoppingcat();">展开</span>
孤雁儿
梅心惊破,<br>
多少春情意。<br><br>
</div> 展开
#content{
font: 13px/25px;
width: 200px;
height: 40px;
background: #eee;
padding: 10px;
border: 4px #ccc double;
border-bottom:0;
overflow: hidden;
}
#key{color:#900;float:right}
</style>
<script>
var s=5;
var minheight=40;
var maxheight=300;
function shoppingcat(){
var key = document.getElementById("key").innerText;
if(key=="展开"){
content.style.pixelHeight+=s;
if(content.style.pixelHeight<maxheight){
setTimeout("shoppingcat();",1);
}else{
document.getElementById("key").innerText="关闭";
}
}else{
content.style.pixelHeight-=s;
if(content.style.pixelHeight>minheight){
setTimeout("shoppingcat();",1);
}else{
document.getElementById("key").innerText="展开";
}
}
}
</script>
<div id="content"> <span id="key" onclick="shoppingcat();">展开</span>
孤雁儿
梅心惊破,<br>
多少春情意。<br><br>
</div> 展开
展开全部
看看吧~ 应该可以符合你的要求.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
#content{
font: 13px/25px;
width: 200px;
height: 40px;
margin: 50px auto;
background: #eee;
padding: 10px;
border: 4px #ccc double;
overflow: hidden;
}
#key{color:#900;float:right;cursor: pointer}
</style>
</head>
<body>
<div id="content" style="height:40px"><span id="key" onclick="shoppingcat();" title="点击展开">展开</span></div>
<script>
var s=5,minheight=40,maxheight=300;
function shoppingcat(){
var key = document.getElementById("key"),
content = document.getElementById("content");
if(key.innerHTML == "展开"){
var h = parseInt(content.style.height);
content.style.height = (h + s)+"px";
if(h<maxheight){
setTimeout(function(){
shoppingcat();
},20);
}else{
key.setAttribute("title","点击关闭");
key.innerHTML="关闭";
}
}else{
var h = parseInt(content.style.height);
content.style.height = (h - s)+"px";
if(h>minheight){
setTimeout(function(){
shoppingcat();
},20);
}else{
key.setAttribute("title","点击展开");
key.innerHTML="展开";
}
}
}
</script>
</body>
</html>
追问
谢谢了。想要原始状态是已经展开的,该怎么改的
展开全部
建议你用jquery来实现,它是javascript的一种封装,更友好。这里有你想要的例子,以下是链接地址,希望能帮到你。
http://www.w3school.com.cn/jquery/jquery_hide_show.asp
http://www.w3school.com.cn/jquery/jquery_hide_show.asp
更多追问追答
追问
那个没有特效的。
追答
你可以加一些动画啊,jquery都有特效的啊,那个网站都有在线实现的,你去看看啊,亲~
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
按你的要求改好了,在附件里。只在IE核心的浏览器下有效果,因为代码不兼容其他浏览器。
追问
恩恩 那如果是这段代码呢。那个好多浏览器都不行的。
http://pan.baidu.com/s/1dD3lkbf
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询