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>

したがって、長いテキストを非表示にして、製品名のリンクをクリックしたときにのみ表示するためにどのコードを配置すればよいか正確にはわかりません。

編集：うまく開きたいのですが、表示されます。それを説明する方法が正確にはわかりませんが、 http://docs.jquery.com/Tutorialsのように、開くときにjQueryを使用してアニメーション化する必要があると思います:Live_Examples_of_jQuery例 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 に答える