怎么用js或jq点击展开，出现隐藏的DIV,点击收起DIV又隐藏起来？

JavaScript027

怎么用js或jq点击展开，出现隐藏的DIV,点击收起DIV又隐藏起来？,第1张

[ h1 ^]\x0d\x0a||\x0d\x0a|div1 |\x0d\x0a||\x0d\x0a\x0d\x0a如图所示：h1是你说贴出的两个图（展开、收起）\x0d\x0adiv1是你要展开后弹出的层\x0d\x0a\x0d\x0a$("#h1").click(function () {\x0d\x0a$("#div1").toggle("slow",function () {\x0d\x0aif ($(this).attr("style").toLowerCase().indexOf("none") == -1) {\x0d\x0a$("#imgBasicInfo").attr("src", "../../Images/BarUp.gif")\x0d\x0a}\x0d\x0aelse {\x0d\x0a$("#imgBasicInfo").attr("src", "../../Images/BarOpen.gif")\x0d\x0a}\x0d\x0a})\x0d\x0a})\x0d\x0aimgBasicInfo为你要显示的展开、收起的图片动态

<style>

#box .hid{display:none}

#box .show{display:block}

</style>

<body>

<ul id="box">

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

<li>5</li>

<li>6</li>

<li>7</li>

<li>8</li>

<li>9</li>

<li>10</li>

<li>11</li>

<li>12</li>

<li>13</li>

</ul>

<p id="tog">展开</p>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>

<script>

var len=$("#box li").length

function int(){

for(i=8i<leni++){

$("#box li").eq(i).addClass("hid")

}

}

$("#tog").click(function(){

var t=$(this).text()

if(t=="展开"){

$("#box .hid").addClass("show")

$(this).text("收缩")

}else{

$("#box .hid").removeClass("show")

$(this).text("展开")

}

})

int()//初始化隐藏多余标签

</script>

最好是用样式来控制显示隐藏show和hide，从jquery对dom的操作速度方便来考虑的话。

里面标签随便你写什么 只要标签外部有个div 的ID 是box就可以

<script language="javascript">

function show_div(){

var obj_div=document.getElementById("starlist")

obj_div.style.display=(obj_div.style.display=='none')?'block':'none'

}

function hide_div(){

var obj_div=document.getElementById("starlist")

obj_div.style.display=(obj_div.style.display=='none')?'block':'none'

}

</script>

<a href="javascript:show_div()" >显示/展开</a>

<div id="starlist">

内容<br/>

内容<br/>

内容<br/>

内容<br/>

</div>

这样就可以实现