JavaScript总结之单击弹出div

浏览数：24 / 时间：2015年06月08日

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

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

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

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

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