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

JavaScript029

怎么用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为你要显示的展开、收起的图片动态

可以改变 "div" 元素的高度(jQuery的animate方法)：

$(".btn1").click(function(){

  $("#box").animate({height:"300px"})

})

也可以设置溢出隐藏：

<div style="min-height:10pxoverflow:hidden">

    <div style="margin-top:-800px">content more..</div>

</div>

第二种方式也需要js动态改变div style里面的margin-top。

你上面说了两个效果。。。。先给你一个效果。。看看。。

<head>

<meta http-equiv="Content-Type" content="text/html charset=utf-8" />

<title>无标题文档</title>

<style>

#aa{cursor:pointer}

 #box1{ width:400px}

 #bb{display:none margin-top:15px margin-left:15px}

  </style>

  <script type="text/javascript">

  document.getElementById(op).style.display="block"

 }

 function hide(op){

  document.getElementById(op).style.display="none"

 }

  </script>

</head>

<body>

<!--方法2-->

 <div id="box1">

   <div onmouseover="show('bb')" onmouseout="hide('bb')"  id="aa"><a href="cc.html" target="_blank">效果二</a></div>

   <div id="bb" style="border:1px #CCC solid">==鼠标经时，显示其下方隐藏的。  点击效果二,跳转页面至cc.html==</div>

 </div>  

</body>