JavaScript总结之单击弹出div

时间：2024-01-19 12:01:38

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

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="width: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是显示速度，效果还不错。

实现效果：

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZ8AAABfCAIAAAC4H13DAAADuklEQVR4nO3dXXLaMACFUe0oy+mSspQsJUvpW7ZAHwiQYluWbGycyznDQ7HlHzrTbyTDTMsJIFF59g0AbELdgEzqBmRSNyCTugGZ1A3IpG5AJnUDMqkb/Hpl8O94uGVqY9eZ28+w4FoPd4BbAKpKub1+brwbU3lb2Th76QUnmR0z+okeTt3g6KYSMBW7lrT97EslNOeNo4OHhzQOa/loD6FucHQtdWs/yTVYo9sXn78yXt2AcfUEtMyYhn/eqG7mbkCHlc/yR0MzW7dhH2ebZe4G9Kk83qqPrOztrVvjfZq7AR1m50QLJlb1ut2tXh91n1271lM3OLr2anSNnAriVO9aAmruBnRYWbfR1mz0rULX9gWX6KJucHT1alRmTC3lemDdFhyrbvDS1q9MK8c21q1xvTn6xUXl3tQNXtrs3G125HXv4pVp4976xsdOD2epGxxdpW6N86PKyO3q1rJX3eClTS0GN/rOdPSo9od6jWee/Tp1PXWDHAueuzVu2Xna9RCHv0GARdQNyKRuQCZ1AzKpG5BJ3YBM6gZkUjcgk7oBmdQNyKRuQCZ1AzKpG5BJ3YBM6gZkUjcgk7oBmdQNyKRuQCZ1AzKpG5BJ3YBM6gZkUjcgk7oBmdSNJqWUsuN/Pl7KVylfu12OSOr2+/39+FNKef+cet9oql/lf5VdoxZ9pA3rdj7z7GuLS7MzdUvw+V5KKX8+/k68b3XtUWOh1uydu5Nt6/aUS7MzdYtwnq7dJmzf73v7dle39vEL9s6dWd1YS91CnKdrt6Bd3ncvUE+nU3/dRhekR66blekrULcUl+nbNWj3vevR+BxtNGS/om5bnJmjUbcct76dA3d7PxO4xmnX/nXbYkqlbq9D3WLcx2wwmZt3F6bRZlXGVzb2anw61v7qPXDZbXMo6pbishBdszAdhmmYufr4qY29rExZT90yXCZql5bdf4napl6r3vHqxnOpW4Tvidq1ZQt/8LZy7nY3+Mh1szh9Ber2+w1+3HZu24Lfglzb9Pb2dmqYwdX7deS67XAhnk7duPlZt2GbWra07527kz3qpnTZ1I1v9UXo7CFTlt7MJqGppG3T6/IU6sbpNLYIbQnWo+Zui3/e0f8xvw/30O0VqBvP11u33V7P/othFXUDMqkbkEndgEzqBmRSNyCTugGZ1A3IpG5AJnUDMqkbkEndgEzqBmRSNyCTugGZ1A3IpG5AJnUDMqkbkEndgEzqBmRSNyCTugGZ1A3IpG5AJnUDMqkbkEndgEzqBmRSNyDTP2WbIcSEXip8AAAAAElFTkSuQmCC" alt="" />

点击后：

aaarticlea/png;base64,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" alt="" />

再次点击回复初始。

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

相关文章