1

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

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

所以我不完全知道我应该输入什么代码来隐藏长文本并且仅在单击我的产品名称链接时显示，任何人都可以帮我这样做。

编辑：我希望它很好地打开，现在显示出来，我不知道如何解释，但我认为我应该使用 jQuery 在打开时让它动画^就像在http://docs.jquery.com/Tutorials :Live_Examples_of_jQuery在 Example B 中单击 Slide In 时，文本以一种漂亮的方式显示，这是我想要长文本执行的操作。

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

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

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

4

4 回答 4

1 

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

<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> <a id="test" style="display:none">     &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> </a><td> <center> <font size="3">     <b> $3 </b> </font>         </center> </td> 
    </tr>
  </table>
  </center>

<a href="#" onclick="toggle('test');">Click to toggle</a>

类似的东西^^？虽然我没有测试过。

编辑：测试它..它的工作原理。

于 2012-04-10T17:02:30.453 回答
1

这应该有效：

$(document).ready(function() {
    $(".more").hide();
    $(".readmore").click(function(e) {
        e.preventDefault(); //Prevent default link action
        $(this).parent().parent().find(".more").toggle();
    });
});
于 2012-04-10T17:03:18.440 回答
0 
Try this:

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

});
于 2012-04-10T16:55:47.883 回答
0

http://jsfiddle.net/fdtdX/

$('.more').hide()
$('.readmore').on('click', function()
{
    $(this).closest('tr').find('.more').show();
})
于 2012-04-10T16:56:02.873 回答