首页 > 技术文章 > 展开收缩效果

danydong 2016-10-14 16:45 原文

<div class="pzb_h">
        <table width="100%" border="0" cellpadding="0" cellspacing="1">
           <tbody>
              <tr>
                <td class="str_t">配置</td>
                <td>2.0L<br>风华版</td>
                <td>2.0L<br>风华版</td>
                <td>2.0L<br>风华版</td>
                <td>2.0L<br>风华版</td>
                <td>2.0L<br>风华版</td>
                <td>2.0L<br>风华版</td>
                <td>2.0L<br>风华版</td>
                <td>2.0L<br>风华版</td>
              </tr>
           </tbody>
        </table>
     </div>
     <div class="cnt">
       <div class="p_title"><span>+</span>官方指导价(人民币)</div>
       <div class="pzb_h">
        <table width="100%" border="0" cellpadding="0" cellspacing="1">
           <tbody>
              <tr>
                <td class="str_t">配置</td>
                <td>2.0L</td>
                <td>2.0L</td>
                <td>2.0L</td>
                <td>2.0L</td>
                <td>2.0L</td>
                <td>2.0L</td>
                <td>2.0L</td>
                <td>2.0L</td>
              </tr>
           </tbody>
        </table>
     </div>
       <div class="p_title"><span>+</span>官方指导价(人民币)</div>
       <div class="pzb_h">
        <table width="100%" border="0" cellpadding="0" cellspacing="1">
           <tbody>
              <tr>
                <td class="str_t">配置</td>
                <td>2.0L</td>
                <td>2.0L</td>
                <td>2.0L</td>
                <td>2.0L</td>
                <td>2.0L</td>
                <td>2.0L</td>
                <td>2.0L</td>
                <td>2.0L</td>
              </tr>
           </tbody>
        </table>
     </div>
     <script type="text/javascript">
        $(".p_title").click(function(){
          $(this).next('.pzb_h').toggle(200)
          var t=$(this).find('span').text();
          if(t=="+"){
              t="-"
              
          }else{
              t="+";
          }
          $(this).find('span').text(t)
        });
    </script>

推荐阅读