Question

我有一个我必须在此表中显示的名称列表。我想只显示此列表中的一个名称，可点击该名称以显示列表中的其余部分。

也许我只是让问题过于复杂。

此外，我试图让代码在点击后不展开表格。我如何在Names:。

前面的列表上对齐名称

我想知道这里是否有人有更好的方法来实现这一点，或者可以指出在这段代码中可以实现的地方。

我正在尝试使用一个不那么复杂的代码，但是无法垂直对齐＆＃34;＆＃34;垂直位于。

中的名称旁边

<!DOCTYPE html> 
<html>
<head><title>Collapse List Demo</title>
<script type="text/javascript" src="jquery-1.11.min.js"></script>
<style>
 ul.list {padding-top:1px;list-style-type: none; padding-left: 3.0em;vertical-align: top;}
 ul li ul {
 display: none;
 list-style-type: none;
 padding:40; margin:20;
} 
</style>
<script>
 $(document).ready(function(){
  $('.list > li a').click(function() {
    $(this).parent().find('ul').toggle();
  });
 });
 </script>
   </head>
  <body>
  <br>

 <table border="1" cellpadding="0" cellspacing="0" width="960">
 <tbody>
 <tr>
 <td colspan="6">
 <td>
 Names: <ul class="list">
                  <li>
                    <a>Joe Doe</a>
            <ul>
                      <li>Mary Smith</li>  
                      <li>Carl Jackson</li>  
                      <li>John Smith</li>  
                    </ul>                
                 </li>
                </ul>
</td>
<td colspan="6">          
 &nbsp;
</td>
<td style="padding-left:260px">  
 Reg Date: <span style="text-transform: none;font-weight: bold;">April 01, 2015</span>
</td>
</tr>          
</tbody>
</table>

<br><br>

Answer 1

我在这里清理了你的例子：

http://jsfiddle.net/eyfbuauz/

var show;

 $(document).ready(function(){
  $(".thebody").hide();
 });

 $(".showme a").click(function(event){
   if (!show) { showhide($(this),"<a href=''>Joe Doe</a>",true); }
   else { showhide($(this),"<a href=''>Joe Doe</a>",false); }
   return false;
 });

function showhide(what,swaptext,swapstate){
   $(".thebody").toggle('fast');
   $(what).html(swaptext);
   show = swapstate;
}

你在javascript中有一些语法错误。

您需要在jQuery回调之外定义show变量和showhide函数。

可折叠的名称列表

1 个答案: