jquery 多个展开隐藏循环

旧城等待， 2022-08-13 16:35 200阅读 0赞 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <script type="text/javascript" src="jquery.1.6.3.js"></script>
  7. <script type="text/javascript">
  8. $(document).ready(function(){
  9.     var hide_infos = $("div.main>div.arc").hide();
  10.     var tit_gets = $("div.bar>span.tit_get").bind("click",
  11.     function() {
  12.         var _self = $(this);
  13.         if (_self.hasClass("get_up")) {
  14.             _self.removeClass("get_up");
  15.             $(this).html("展开");
  16.             hide_infos.eq(tit_gets.index(_self)).hide()
  17.         } else {
  18.             $(this).html("收起");
  19.             _self.addClass("get_up");
  20.             hide_infos.eq(tit_gets.index(_self)).show()
  21.         }
  22.     });
  23. });
  24. </script>
  25. </head>
  27. <style type="text/css">
  28. body{ margin:0; padding:0; font:12px"宋体";}
  29. input,button,select,textarea{outline:none;resize:none;}
  30. .main{ width:980px; margin:0 auto; background:#f1f1f1; padding:20px;}
  31. .arc p{ padding:0; margin:0; text-indent:2em; line-height:22px; }
  32. .bar{ text-align:right;}
  33. .tit_get{ cursor:pointer; background:url(qh.gif) no-repeat right; padding-right:15px;}
  34. .get_up{ cursor:pointer; background:url(qh1.gif) no-repeat right; padding-right:15px;}
  35. </style>
  36. <body>
  37. <div class="main">
  38.     <div class="arc">
  39.     <p>据港媒报道，今届中期选举被视为2016年大选前哨战，民主党连场败仗，为前第一夫人希拉里的白宫梦敲响警号。昨日的初步选举结果显示，三分之二获得希拉里或其丈夫克林顿背书的候选人落败，其中3场女对男的参议院战场，被视为测试希拉里两年后角逐总统宝座的风向标，但该3名获希拉里力撑的女候选人中就有两人败北，最新民调则显示，倘选民投票时较重视党派，她与共和党潜在对手比较时处于劣势。</p>
  41. <p>希拉里在这场中期选举积极巡回全国为民主党人助选，备战2016大选的意味浓厚。截至本港时间昨日傍晚，除了1场下月进行次轮投票及11场未分胜负的选举外，获她或克林顿撑场者16人胜、30人负。</p>
  42. </div>
  43.     <div class="bar"><span class="tit_get">展开</span></div>
  45.     <div class="arc">
  46.     <p>据港媒报道，今届中期选举被视为2016年大选前哨战，民主党连场败仗，为前第一夫人希拉里的白宫梦敲响警号。昨日的初步选举结果显示，三分之二获得希拉里或其丈夫克林顿背书的候选人落败，其中3场女对男的参议院战场，被视为测试希拉里两年后角逐总统宝座的风向标，但该3名获希拉里力撑的女候选人中就有两人败北，最新民调则显示，倘选民投票时较重视党派，她与共和党潜在对手比较时处于劣势。</p>
  48. <p>希拉里在这场中期选举积极巡回全国为民主党人助选，备战2016大选的意味浓厚。截至本港时间昨日傍晚，除了1场下月进行次轮投票及11场未分胜负的选举外，获她或克林顿撑场者16人胜、30人负。</p>
  49. </div>
  50.     <div class="bar"><span  class="tit_get">展开</span></div>
  51. </div>
  52. </body>
  53. </html>

用到的图片： Center Center 1

发表评论

表情：
评论列表 （有 0 条评论，200人围观）

还没有评论，来说两句吧...

相关阅读