效果体验：http://sandbox.runjs.cn/show/rw4vq8zo
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> .bordertable {100%;border-collapse: collapse;color: #707070;background: #fff; border: 1px solid #bcbcbc;border-right:0} .bordertable td{border-right:1px #ccc solid; border-bottom:1px #ccc solid; text-align:center;padding:12px 0;font-size:14px;color:#333333} .a_c{color:#720a05} .content td{ text-align:center;padding:10px 0;font-size:12px;color:#414141} a { color:#000; text-decoration:none} #j_content{ } .j_showtr td { background:#0FF;} .j_showtr { display:none;100%;} .j_showtr_content { overflow:hidden;height:35px;100%} .j_showtr_content ul{margin:0;100%} .j_showtr_content ul li{float:left;14%; list-style:none;} .a_yangshi{background:url(../images/shaixuan.png) right center no-repeat; text-align:left; color:#707070; padding:0 12px 0 0; margin:0 auto} a:hover{ text-decoration:underline;} </style> </head> <body> <table cellspacing="0" cellpadding="0" class="content bordertable" id="tab_BB"> <tbody> <tr class="danhao td_bc_l" zz-id="19-38" zz-go=""> <td width="4%">02</td> <td width="8%"><a href="#">19-38</a></td> <td width="5%">三十一部</td> <td width="7%">设计师</td> <td width="12%" title="行行新嘻嘻">行行新嘻嘻</td> <td width="4%">办公</td> <td width="5%"> 80</td> <td width="9%">2014-03-18</td> <td width="5%">0</td> <td width="4%"> 0</td> <td width="4%"> 0</td> <td width="5%">0</td> <td width="4%"> 0</td> <td width="4%">0</td> <td>行行新嘻嘻行行新嘻嘻行行 </td> </tr> <tr class="j_showtr" style="display:none;"> <td colspan="15"> <div class="j_showtr_content"> <ul class="thetop" style="overflow:hidden;"> <li class="active"><a class="ico1" href="javascript:">回访添加</a></li> <li><a class="ico2" href="javascript:">填写合同</a></li> <li><a class="ico3" href="javascript:">客户预付</a></li> <li><a class="ico3" href="javascript:">设计已签</a></li> <li><a class="ico4" href="javascript:">施工已签</a></li> <li><a class="ico4" href="javascript:">提交未签</a></li> </ul> </div> </td> </tr> <tr class="danhao " zz-id="19-38" zz-go=""> <td width="4%">02</td> <td width="8%"><a href="#">19-38</a></td> <td width="5%">三十二部</td> <td width="7%">设计师</td> <td width="12%" title="行行新嘻嘻">行行新嘻嘻</td> <td width="4%">办公</td> <td width="5%"> 80</td> <td width="9%">2014-03-18</td> <td width="5%">0</td> <td width="4%"> 0</td> <td width="4%"> 0</td> <td width="5%">0</td> <td width="4%"> 0</td> <td width="4%">0</td> <td>行行新嘻嘻行行新嘻嘻行行 </td> </tr> <tr class="j_showtr" style="display:none;"> <td colspan="15"> <div class="j_showtr_content"> <ul class="thetop"> <li class="active"><a class="ico1" href="javascript:">回访添加</a></li> <li><a class="ico2" href="javascript:">填写合同</a></li> <li><a class="ico3" href="javascript:">客户预付</a></li> <li><a class="ico3" href="javascript:">设计已签</a></li> <li><a class="ico4" href="javascript:">施工已签</a></li> <li><a class="ico4" href="javascript:">提交未签</a></li> </ul> </div> </td> </tr> <tr class="danhao td_bc_l" zz-id="19-38" zz-go=""> <td width="4%">02</td> <td width="8%"><a href="#">19-38</a></td> <td width="5%">三十三部</td> <td width="7%">设计师</td> <td width="12%" title="行行新嘻嘻">行行新嘻嘻</td> <td width="4%">办公</td> <td width="5%"> 80</td> <td width="9%">2014-03-18</td> <td width="5%">0</td> <td width="4%"> 0</td> <td width="4%"> 0</td> <td width="5%">0</td> <td width="4%"> 0</td> <td width="4%">0</td> <td>行行新嘻嘻行行新嘻嘻行行 </td> </tr> <tr class="j_showtr" style="display: none;"> <td colspan="15"> <div class="j_showtr_content"> <ul class="thetop"> <li class="active"><a class="ico1" href="javascript:">回访添加</a></li> <li><a class="ico2" href="javascript:">填写合同</a></li> <li><a class="ico3" href="javascript:">客户预付</a></li> <li><a class="ico3" href="javascript:">设计已签</a></li> <li><a class="ico4" href="javascript:">施工已签</a></li> <li><a class="ico4" href="javascript:">提交未签</a></li> </ul> </div> </td> </tr> <tr class="danhao" zz-id="19-38" zz-go=""> <td width="4%">02</td> <td width="8%"><a href="#">19-38</a></td> <td width="5%">三十四部</td> <td width="7%">设计师</td> <td width="12%" title="行行新嘻嘻">行行新嘻嘻</td> <td width="4%">办公</td> <td width="5%"> 80</td> <td width="9%">2014-03-18</td> <td width="5%">0</td> <td width="4%"> 0</td> <td width="4%"> 0</td> <td width="5%">0</td> <td width="4%"> 0</td> <td width="4%">0</td> <td>行行新嘻嘻行行新嘻嘻行行 </td> </tr> <tr class="j_showtr" style="display: none;"> <td colspan="15"> <div class="j_showtr_content"> <ul class="thetop"> <li class="active"><a class="ico1" href="javascript:">回访添加</a></li> <li><a class="ico2" href="javascript:">填写合同</a></li> <li><a class="ico3" href="javascript:">客户预付</a></li> <li><a class="ico3" href="javascript:">设计已签</a></li> <li><a class="ico4" href="javascript:">施工已签</a></li> <li><a class="ico4" href="javascript:">提交未签</a></li> </ul> </div> </td> </tr> <tr class="danhao td_bc_l" zz-id="19-38" zz-go=""> <td width="4%">02</td> <td width="8%"><a href="#">19-38</a></td> <td width="5%">三十一部</td> <td width="7%">设计师</td> <td width="12%" title="行行新嘻嘻">行行新嘻嘻</td> <td width="4%">办公</td> <td width="5%"> 80</td> <td width="9%">2014-03-18</td> <td width="5%">0</td> <td width="4%"> 0</td> <td width="4%"> 0</td> <td width="5%">0</td> <td width="4%"> 0</td> <td width="4%">0</td> <td>行行新嘻嘻行行新嘻嘻行行 </td> </tr> <tr class="j_showtr" style="display: none;"> <td colspan="15"> <div class="j_showtr_content"> <ul class="thetop"> <li class="active"><a class="ico1" href="javascript:">回访添加</a></li> <li><a class="ico2" href="javascript:">填写合同</a></li> <li><a class="ico3" href="javascript:">客户预付</a></li> <li><a class="ico3" href="javascript:">设计已签</a></li> <li><a class="ico4" href="javascript:">施工已签</a></li> <li><a class="ico4" href="javascript:">提交未签</a></li> </ul> </div> </td> </tr> </tbody></table> <script src="图片轮播/jquery-xImage/jquery-1.10.2.min.js"> </script> <script> $(function(){ $(".danhao").click(function(){ if(!$(this).next().attr("data-thream")){ $('.j_showtr').css("display","none").removeAttr("data-thream"); $(this).next().css("display","table-row").attr("data-thream","1"); } else{ $(this).next().css("display","none").removeAttr("data-thream"); } }) }); </script> </body> </html>