Question

试图让我的slideDown效果工作并隐藏但不知何故它不起作用。基本上我的用户搜索记录然后它将显示结果。在搜索的右上角会有一个按钮来隐藏表格或通过滑动效果再次显示表格。

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>

JS：

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

CSS：

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

所以我关注slideDown()上的jquery文档，但不知何故，它不会缓慢滑下来，之后也不会隐藏。我尝试使用$(document).ready，但这似乎不是让我困惑的问题。我在css中的位置是否与hide效果或slideDown效果相关？有没有其他方法可以使这项工作或解决方案，以实现这些效果？提前谢谢！

Answer 1

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

我不知道为什么.slideUp()反应如此缓慢，这是jQuery的东西。

＆＃13;

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

＆＃13;

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

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type="button" class="toggling" id="togglething"><i class="fa fa-angle-down"></i></button>
<div id="scrolling">
    <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>

＆＃13;

Answer 2

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

HTML

<button type="button" class="toggling" id="togglething"><i class="fa fa-angle-down"></i></button>
<div id="scrolling"> 
        <!--<div id="loading"></div>-->
        <div class="slide-container">
    <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>
      </div>

JS：

$('#togglething').click(function(){
if ( $( ".slide-container" ).is( ":hidden" ) ) {

    $( ".slide-container" ).slideDown( 'slow' );
} else {
    $( ".slide-container" ).hide();
}
$(this).find('i').toggleClass('fa-angle-up fa-angle-down')
});

CSS：

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

Answer 3

将.table1设置为display：block似乎有助于滑动。

HTML：

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

jQuery的：

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

CSS：

.table1 {display:block;}

和Fiddle

似乎无法让我的桌子隐藏或向下滑动

3 个答案: