Question

我一直在寻找解决方案，但我找不到它。我甚至从SO div will slidedown but it wont slideup

尝试了这个

基本上我在桌面上使用来自jquery的slideUp()，但它没有向上滑动，而只是消失了。

我已经在桌面上完成float: none，将position: relative添加到父元素。但它仍然没有显示滑动效果。

jquery的：

$('#voucher-btn').click(function(e){
    $('#voucher-list').slideUp(400);
    e.preventDefault();
});

HTML：

<div id="main">

 <ul>
  <li><label>Scratch-off Panel</label><input type="text" id="scratch-panel" /></li> 
  <li><label>Serial Number</label><input class="field-small" type="text" id="serial-num" /></li>
  <!--<li><button class="but-sec" id="voucher-btn" type="submit" title="Apply">Apply</button></li>-->
  <li><input class="but-sec" type="submit" id="voucher-btn" value="Apply" /></li>
 </ul>

 <table id="voucher-list">
  <thead>
    <tr>
      <th width="200px">$Value One</th><th>$Value Two</th><th>$Value Three</th><th>$Value Four</th>
    </tr>
  </thead>
  <tbody>
    <td>MSFRGFCHGGKJVJ1234</td><td>12345678</td><td>£156678</td><td>Remove</td>
  </tbody>
 </table>

</div>

CSS：

#main{
 width: 700px;
 margin: 20px auto;
 position: relative;
}

#voucher-list{
 border-collapse: collapse;
 float: none;
 position: relative;
}

#voucher-list td, th{
 border: 1px solid #ccc;
 padding: 5px;
 text-align: left;
}

li{
 list-style: none;
 overflow: hidden;
 margin: 0 0 10px 0;
}

input[type="text"]{
 float: left;
 height: 20px;
 border: 1px solid #ccc;
}

label{
 float: left;
 width: 120px;
}

Answer 1

表很挑剔，你应该避免直接在表上使用效果。什么工作包围你的桌子周围的div，并将效果应用到那个。

您对表的控制与对其他元素的控制不同。这就是为什么在动画过程中，blindUp无法改变表格的高度。

这是一个例子： http://jsfiddle.net/BQTGF/

Answer 2

表不是块级元素，因此其高度和宽度不可设置。为了使其工作，将表包装在块级元素（如div标签）中，并在div上执行slideUp

<div id="wrapper">
 <table id="voucher-list">
  <thead>
    <tr>
      <th width="200px">$Value One</th><th>$Value Two</th><th>$Value Three</th><th>$Value Four</th>
    </tr>
  </thead>
  <tbody>
    <td>MSFRGFCHGGKJVJ1234</td><td>12345678</td><td>£156678</td><td>Remove</td>
  </tbody>
 </table>
</div>

$('#voucher-btn').click(function(e){
    $('#wrapper').slideUp(400);
    e.preventDefault();
});

Answer 3

如果您要删除该表，使用.wrapAll(...)将阻止您使用不必要的标记修饰您的标记。

以下示例在需要滑动表关闭时动态添加div，然后删除表（和临时div）：

$('#tableId').wrapAll('<div />').closest('div').slideUp(1000, function () {
    $('#tableId').closest('div').remove();
});

Answer 4

您可以做的一件事是将整个表格包装在一个分区中，然后按如下方式使用切换方法：

$('<table id>').wrapInner('<div></div>').toggle('slide', { direction: "direction" }, speed);

Answer 5

我最近几天了解了javaScript的一些内容，我认为这段代码可以帮到你：

    $(document).ready(function()  {
    // Hide the table tags
     $("table").hide();

     $("h1").click(function() {
         $(this).next().slideToggle(500);
         });

});

这段代码应该做的是用标签“H1”点击它应该隐藏标签“Table” 但我看起来有点混乱滑动的东西，但有隐藏和显示。希望我帮助

使用jquery向上或向下滑动整个HTML表格不起作用

5 个答案: