Question

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

<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让它动画，同时在示例B中http://docs.jquery.com/Tutorials:Live_Examples_of_jQuery打开^单击“幻灯片放映”时，文本以漂亮的方式显示，即我想要长文本要做的事情。

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

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

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

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

那样的东西^^？我没有测试过。

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

Answer 2

这应该有效：

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

Answer 3

Try this:

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

});

Answer 4

http://jsfiddle.net/fdtdX/

$('.more').hide()
$('.readmore').on('click', function()
{
    $(this).closest('tr').find('.more').show();
})

单击链接时显示一些文本

4 个答案: