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

JavaScript016

怎么用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就可以

内存里的值变了。

出现控制台中的打印数组无法展开是因为打印时打印机中的内存储存值变了，与展开收起的值不一致。可能是用户操作打印机时让数组异步才产生的报错。

JS控制台是javascript的内置调试器，是web开发人员常会用到的console.log，可以打印消息和调试问题。