Javascript 单击链接时显示一些文本

这里我有一段代码，我只想在点击链接时显示长文本

<script src="files/jquery.js"></script>

<center>

<table border="1" bordercolor="#999999" style="background-color:#00000" cellpadding="0" cellspacing="0" width="750">
<tr style="background-color:#00000 height: 50px; width : 250px; font-size: 25px">
<td> <center> Product </center> </td> <td> <center> Description </center> </td> <td>     <center> Price </center> </td>
</tr>
<tr>
<td>&nbsp;<a href="#" class="readmore">My product name</a> </td> <td>&nbsp;This is just an introducary description <p class="more">This is a more complex description which should open only when the product name is clicked and here will be also a button to add to cart and some media .</p> <td> <center> <font size="3"> <b> $3 </b> </font> </center> </td> </tr>
</table>

</center>

产品说明价格
这只是一个介绍说明
这是一个更复杂的说明，只有在单击产品名称时才会打开，这里还有一个按钮可添加到购物车和一些媒体。
$3

所以我不知道我应该用什么代码来隐藏长文本，只有当我的产品名链接被点击时才会显示，有人能帮我吗

编辑：我希望它能很好地打开，现在显示出来，我不知道怎么解释，但我认为我应该使用jQuery在打开时将其设置为动画，就像在示例B中单击“滑入”时，文本以漂亮的方式显示，这就是我想要长文本的目的

---

经过大量的更改和测试，我已经这样做，使链接打开一些文本，当点击地址栏没有任何变化，它可以通过再次点击扭转，所以帮助其他成员这里是最终的代码

<script type='text/javascript'>
function toggle(id)
{
var el = document.getElementById(id);
if(el.style.display == 'block')
el.style.display = 'none';
else
el.style.display = 'block';
}
</script>

<center>

<table border="1" bordercolor="#999999" style="background-color:#00000" cellpadding="0" cellspacing="0" width="750">
<tr style="background-color:#00000 height: 50px; width : 250px; font-size: 25px">
<td> <center> Product </center> </td> <td> <center> Description </center> </td> <td> <center> Price </center> </td>
</tr>
<tr>
<td>&nbsp;<a href="javascript:void(0)" onclick="toggle('hiddentext');">My product name</a> </td> <td>&nbsp;This is just an introducary description <p class="more" id="hiddentext" style="display: none;">This is a more complex description which should open only when the product name is clicked and here will be also a button to add to cart and some media .</p> <td> <center> <font size="3"> <b> $3 </b> </font> </center> </td> </tr>
</table>

</center>

功能切换（id）
{
var el=document.getElementById（id）；
如果（el.style.display=='block'）
el.style.display='none'；
其他的
el.style.display='block'；
}
产品说明价格
这只是一个介绍说明
这是一个更复杂的说明，只有在单击产品名称时才会打开，这里还有一个按钮可添加到购物车和一些媒体中。
$3

现在我要做的最后一件事是按照我在编辑中所描述的方式将文本很好地滑动，以便以更好的方式显示出来，因此如果有人能帮助我这样做，我将不胜感激。

Try this:

$(function(){ 
     $(".more").hide();
     $(".readmore").click(function(){
        $(".more").show();
    });

});

功能切换（id）{
var el=document.getElementById（id）；
如果（el.style.display=='block'）
el.style.display='none'；
其他的
el.style.display='block'；
}
产品说明
价格

这应该可以：

$(document).ready(function() {
    $(".more").hide();
    $(".readmore").click(function(e) {
        e.preventDefault(); //Prevent default link action
        $(this).parent().parent().find(".more").toggle();
    });
});

---

e.preventDefault（）

将是一个好主意-跳到顶部或只是将

#

添加到地址栏很烦人/难看。从这个开始-看看你是否可以针对readmore类。修复了它，现在我想以我在编辑中描述的nicxe方式显示文本，再次单击链接后再次隐藏我的文本。这不起作用或我没有正确使用它，你能在我的完整代码中正确输入吗，它是否需要jQuery库。对不起。我在代码中发现了som错误。缺少

）

和

.parent（）

。我现在已经更新了代码。我已经添加了切换，所以点击链接将切换文本显示和不显示。是的，代码需要jQuery。我已经在你的HTML上测试了代码，它对我很有用。嗨，无论如何，谢谢我已经和一位开发人员的朋友解决了这个问题，我们让它与jQuery库一起工作。虽然我的答案中有一个简单的代码，但现在我们正在合作对代码进行一些改进，所以它将是最终的，谢谢你试着帮助我。它不起作用，而且似乎和我们朋友写的相去甚远。它只是简单的javascript，可能没有其他解决方案那么优雅。只是对代码做了一点小小的调整。并对其进行了测试。。代码起作用（），只是元素最初没有隐藏。我在链接示例中唯一更改的是将

id

移动到具有详细描述的段落，并设置额外的

显示：无。它看起来与其他建议非常不同的原因是它是纯javascript，而不是jQuery。我应该将javascript代码放在标记之前还是之后。
$(document).ready(function() {
    $(".more").hide();
    $(".readmore").click(function(e) {
        e.preventDefault(); //Prevent default link action
        $(this).parent().parent().find(".more").toggle();
    });
});