JavaScript总结之单击弹出div

今天也算用了不少手段来实现他们的要求，大概记录一下，下边的代码示例，我全部修改贴出来，争取全部占到自己的代码里就能用。

1、点击同一个div，打开/关闭另一个div。

 1 <script type="text/javascript" src="jquery-1.11.1.min.js"></script> 
 2 <script type="text/javascript">
 3     /*var btnShow=document.getElementById('show_detail');
 4     var detail=document.getElementById('detail');
 5     btnShow.onclick=function(){
 6         if(detail.style.display=="none"){
 7             detail.style.display="block"
 8         }else{
 9             detail.style.display="none";
10                         
11         }
12                 
13     }*/
14      $(function(){
15         $("#show_detail").click(function(){
16             $('#detail').toggle('fast');
17             })
18         })
19 </script>

然后是html代码，大概做了个简单的：

<div class="content" style="400px;">
  <div id="show_detail" align="right" style="margin-right:20px; color:#00F; cursor:pointer;">[详细信息]</div>
  <div id="detail" align="left" style="display:none; height:150px; overflow:auto; padding:10px;">
    <hr />
    <br />
    <p>弹出框:</p>
    <p style="line-height:25px;">欢迎访问，有何问题欢迎交流<br />
    </p>
  </div>
  <p style='text-align:center'><b><span style='font-size:1.5em'>&raquo;</span> 返回 <a href="javascript:history.back()">上一层</a></b></p>
</div>

隐藏部分的也可以，不过显示效果不如下边jquery写的。slow和fast是显示速度，效果还不错。

实现效果：

点击后：

再次点击回复初始。

本想都写一个的。发现这样的话会很长，分着写吧。到时候在写一个索引便好。