0

I'm trying to set up a toggle function to show more content IN A TABLE.

So here it is, I can't do much things with my < tr >, I don't know if its because I missed something or because toggle() only works with < div > ?

Here is what I did :

The script

<script>
$(document).ready(function() {
 // hides the slickbox as soon as the DOM is ready (a little sooner that page load)
  $('.hidden').hide();

 // slides down, up, and toggle the slickbox on click    

  $('.more-info').click(function() {
    $('.hidden').slideToggle(1000);
    return false;
  });
});
</script>

The button :

<div style="float:right;"><a href="javascript:void(0)" class="more-info">Show more</a>
</div>

The table (the tr to Toggle):

<tr class="hidden">
    <td>
        <img id="tableImage" src="<?php echo base_url($product['image_url'])?>" alt="product" width="121"/>
    </td>
    <td>
        <?php echo $product['title'] ?>
    </td>
    <td>
        <?php 
            $options = array(
                         '0'  => '0',
                         '1'  => '1',
                         '2'  => '2',
                         '3'  => '3',
                         '4'  => '4',
                         '5'  => '5',
                         '6'  => '6',
                         '7'  => '7',
            );

            if($product['quantity']==0){
               $value[$product['title']] = set_value('quantity'.$product['title']);
            }else{
               $value[$product['title']] = $product['quantity'];
            }

            $data0 = 'class="quantSelect" value="'.$value[$product['title']].'" id="quant'.$product['title'].'"';
            echo    form_dropdown('quantity'.$product['title'], $options, $value[$product['title']],$data0);
        ?>
    </td>
    <td>
        <?php echo $product['price'] ?>
    </td>
    <td id="<?php echo 'price'.$product['title']?>">$<?php echo $total[$product['title']] ?>
    </td>
</tr>
4

2 に答える 2

1

どうtoggleClassですか？

$('.more-info').click(function() {
    $(this).toggleClass('hidden');
    return false;
});

.hidden {
    display: none;
}

他に、PHP を HTML から分離しませんか?

参照

このデモが役に立ちます。

于 2012-07-27T05:37:18.367 に答える
1

.toggle()確かに div 要素だけに限定されません。実際、tr 要素でうまく動作するようです: http://jsfiddle.net/sdWVU/ - 期間を指定した場合を含む: http://jsfiddle.net/sdWVU/1/

ただし、コードは実際には を使用していませ.toggle()ん.slideToggle()。それは、要素を非表示にして表示するという意味で tr 要素では「機能」しませんが、スライドしません: http://jsfiddle.net/sdWVU/2/スライド効果の欠如は制限ですテーブルの仕組みについて。

行を非表示にしてアニメーションで表示したい場合は、 をお勧めし.toggle('slow')ます。

于 2012-07-27T06:53:13.503 に答える