Javascript Can'；我的桌子好像没能藏起来或滑下来

一直试图让我的幻灯片效果工作和隐藏，但不知何故，它不工作。基本上，我的用户搜索一条记录，然后显示结果。搜索右上角将有一个按钮，用于隐藏表格或通过向下滑动的效果再次显示表格

HTML:

<button type="button" class="toggling" id="togglething"><i class="fa fa-angle-down"></i></button>
    <div id="scrolling">
    <!--<div id="loading"></div>-->
    <table id="results" class="table1" cellspacing=10px>
        <thead>
            <tr class = "spacing">
                <th class='headers'>Index No</th>
                <th class='headers'>SAM ID</th>
                <th class='headers'>Item Description</th>
                <th class='headers'>Type</th>
                <th class='headers'>Inventory Status</th>
                <th class='headers'>Issued QTY</th>
                <th class='headers'>Opening QTY</th>
                <th class='headers'>Closing QTY</th>
                <th class='headers'>Corrupted QTY</th>
                <th class='headers'>Date In</th>
                <th class='headers'>Date Out</th>
                <th class='headers'>Remarks</th>
                <th class='headers'>NTA SAM Reference No.</th>
                <th class='headers' colspan="2">Action to take</th>
            </tr>
        </thead>
        <tbody id="bResults"></tbody>
    </table>
    </div>

$('#togglething').click(function(){
if ( $( ".table1" ).is( ":hidden" ) ) {
    $( ".table1" ).slideDown( "slow" );
} else {
    $( ".table1" ).hide();
}
$(this).find('i').toggleClass('fa-angle-up fa-angle-down')
});

.table1 {
display:none;
position:relative;
}
table thead th .text {
  position:relative;
}
#table-wrapper {
  overflow:auto;  
}
#scrolling{
  overflow:auto;
}  

CSS:

<button type="button" class="toggling" id="togglething"><i class="fa fa-angle-down"></i></button>
    <div id="scrolling">
    <!--<div id="loading"></div>-->
    <table id="results" class="table1" cellspacing=10px>
        <thead>
            <tr class = "spacing">
                <th class='headers'>Index No</th>
                <th class='headers'>SAM ID</th>
                <th class='headers'>Item Description</th>
                <th class='headers'>Type</th>
                <th class='headers'>Inventory Status</th>
                <th class='headers'>Issued QTY</th>
                <th class='headers'>Opening QTY</th>
                <th class='headers'>Closing QTY</th>
                <th class='headers'>Corrupted QTY</th>
                <th class='headers'>Date In</th>
                <th class='headers'>Date Out</th>
                <th class='headers'>Remarks</th>
                <th class='headers'>NTA SAM Reference No.</th>
                <th class='headers' colspan="2">Action to take</th>
            </tr>
        </thead>
        <tbody id="bResults"></tbody>
    </table>
    </div>

$('#togglething').click(function(){
if ( $( ".table1" ).is( ":hidden" ) ) {
    $( ".table1" ).slideDown( "slow" );
} else {
    $( ".table1" ).hide();
}
$(this).find('i').toggleClass('fa-angle-up fa-angle-down')
});

.table1 {
display:none;
position:relative;
}
table thead th .text {
  position:relative;
}
#table-wrapper {
  overflow:auto;  
}
#scrolling{
  overflow:auto;
}  

因此，我在

slideDown（）

上关注jquery文档，但不知何故，它不会缓慢地向下滑动，也不会在之后隐藏。我试着使用

$（document）.ready

，但这似乎也不是困扰我的问题。我在css中的位置是否与隐藏效果或向下滑动效果相关？ 是否有其他方法可以实现这一效果，或者有一种解决方案可以实现这一效果？提前谢谢

这个（稍微简化了的）jQuery代码可以工作。现在你可以修改它来做你想做的事

我不知道为什么

.slideUp（）

的反应如此缓慢，这是jQuery的问题

$（“#切换”）。单击（函数（）{
如果（$（“.table1”）.is（“：visible”）{$（“.table1”）.slideUp（）；}
else{$（“.table1”）.slideDown（）；}
$（this）.find（'i'）.toggleClass（'fa-angle-up-fa-angle-down'））
});
。表1{
显示：无；
位置：相对位置；
}
表THAD th.文本{
位置：相对位置；
}
#表包装器{
溢出：自动；
}
#滚动{
溢出：自动；
}  
完成*/

索引号
山姆ID
项目说明
类型
库存状况
发出数量
期初数量
期末数量
损坏数量
约会
注明日期
评论
NTA SAM参考号。
采取的行动
这个（稍微简化的）jQuery代码可以工作。现在你可以修改它来做你想做的事

我不知道为什么
.slideUp（）
的反应如此缓慢，这是jQuery的问题


$（“#切换”）。单击（函数（）{
如果（$（“.table1”）.is（“：visible”）{$（“.table1”）.slideUp（）；}
else{$（“.table1”）.slideDown（）；}
$（this）.find（'i'）.toggleClass（'fa-angle-up-fa-angle-down'））
});
。表1{
显示：无；
位置：相对位置；
}
表THAD th.文本{
位置：相对位置；
}
#表包装器{
溢出：自动；
}
#滚动{
溢出：自动；
}  
完成*/

索引号
山姆ID
项目说明
类型
库存状况
发出数量
期初数量
期末数量
损坏数量
约会
注明日期
评论
NTA SAM参考号。
采取的行动
不完全确定您的表为什么不工作，但是如果您将表包装在一个div中并向下滑动/隐藏它是否按预期工作。例如：

HTML

CSS:

不完全确定为什么您的表不工作，但是如果您将表包装在一个div中并向下滑动/隐藏它是否按预期工作。例如：

HTML

CSS:

将.table1设置为显示：块似乎有助于滑动

HTML:

CSS:

还有一个
将.table1设置为显示：块似乎有助于滑动

HTML:

CSS:

a
我应该在转换中使用css而不是jquery吗？我似乎想不出还有什么能帮到它，就我个人而言，我会使用带有一些动画/转换的“复选框切换技巧”来解决滑动问题，同样容易理解，而且不需要jQuery/JS。只需谷歌搜索或搜索代码笔。有很多例子。我应该在转换中使用css而不是jquery吗？我似乎想不出还有什么能帮到它，就我个人而言，我会使用带有一些动画/转换的“复选框切换技巧”来解决滑动问题，同样容易理解，而且不需要jQuery/JS。只需谷歌搜索或搜索代码笔。有很多例子。
<button type="button" class="toggling" id="togglething"><i class="fa fa-angle-down"></i></button>

<table id="results" class="table1" cellspacing="10px" style="display:none; border:1px solid #000">
  <thead>
    <tr class = "spacing">
      <th class='headers'>Index No</th>
      <th class='headers'>SAM ID</th>
      <th class='headers'>Item Description</th>
      <th class='headers'>Type</th>
      <th class='headers'>Inventory Status</th>
      <th class='headers'>Issued QTY</th>
      <th class='headers'>Opening QTY</th>
      <th class='headers'>Closing QTY</th>
      <th class='headers'>Corrupted QTY</th>
      <th class='headers'>Date In</th>
      <th class='headers'>Date Out</th>
      <th class='headers'>Remarks</th>
      <th class='headers'>NTA SAM Reference No.</th>
      <th class='headers' colspan="2">Action to take</th>
    </tr>
  </thead>
  <tbody id="bResults">

  </tbody>
</table>

$( "#togglething" ).click(function() {
  $( "#results" ).slideToggle( "slow");
});

.table1 {display:block;}