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

Question

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

就是这样，我的

不能做很多事情，我不知道是因为我错过了什么还是因为 toggle() 只适用于

？

这就是我所做的：

脚本

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

【问题讨论】：

• 你介意做一个 jsFiddle 吗？
• more-info 放在哪里？
• 你能告诉我你的代码吗？我们先试着整理一下。
• @Inkbug: 我不知道什么是 jsFiddle 抱歉，我不是 jquery 专家，你能告诉我更多吗？
• @Ricardo Lohmann：更多信息是按钮，第二个代码。我试图将我的脚本与我的按钮和表格分开，页面实际上很长，所以我只放了必要的部分。

Answer 1

toggleClass 怎么样？

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

.hidden {
    display: none;
}

其他的，为什么不把 PHP 和 HTML 分开？

reference

这个demo可以帮助你。

Answer 2

.toggle() 绝对不仅限于 div 元素，实际上它似乎与 tr 元素一起工作正常：http://jsfiddle.net/sdWVU/ - 包括如果您指定持续时间：http://jsfiddle.net/sdWVU/1/

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

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