JQuery Toggle()函数是否只支持div隐藏

Question

我正在尝试设置一个切换函数，以便在表格中显示更多内容。

所以现在，我不能用我的<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）：

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

Answer 1

.toggle()绝对不仅仅局限于div元素，事实上，它似乎可以很好地与tr元素配合使用：http://jsfiddle.net/sdWVU/-如果指定了持续时间，则包括：http://jsfiddle.net/sdWVU/1/

但是，您的代码实际上并不使用.toggle()，而是使用.slideToggle()。这对tr元素不起作用，因为它确实隐藏和显示了元素，但不会滑动：http://jsfiddle.net/sdWVU/2/幻灯片效果的缺乏限制了表格的工作方式。

如果你想用动画隐藏和显示行，我建议使用.toggle('slow')。

Answer 2

toggleClass怎么样？

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

还有，为什么不将PHP与HTML分离？

参考

这个演示可以帮助您。