可折叠名称列表

-1

我有一张我必须在此表中显示的名称列表。我只想在此列表中显示 ONE名称，并且可以单击该名称以显示列表中的其他名称。可折叠名称列表

也许我只是过分复杂的问题。

此外，我试图让代码不会扩大表一旦点击。我怎样才能在Names:前列出名单上的名字。

我想知道这里有没有人会有更好的方式来完成这一点，或者可以指出在这个代码中可以实现的位置。

我正在尝试使用不太复杂的代码，但不能垂直对齐“”中垂直旁边的名称。

<!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>

来源

2015-01-15 Andre

我在这里清理你的例子：

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函数。

来源

2015-01-15 18:28:50

可折叠名称列表

回答

相关问题