0

我正在尝试设置一个切换功能以在表格中显示更多内容。

所以在这里，我不能用我的 < tr > 做很多事情，我不知道是因为我错过了什么还是因为 toggle() 只适用于 < div > ？

这是我所做的：

剧本

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

按钮 ：

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

表（ tr 到 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 回答