首页 > 解决方案 > jQuery slideToggle("slow") 不会以慢速切换

问题描述

我有一个使用slideToggle("slow"). 问题是“慢”效应不起作用。slideToggle当我从慢到快或当我通过 200到 800时,行为绝对没有区别。请参阅代码片段中的代码。

$(document).ready(function() {
  //console.log("ready to go");
  $("#recordTable tr[data-cost-level='total']").click(
    function(evt) {
      // List the rows that need to be toggles
      var sourceData = 'division';
      var toggleData = 'cost-level';
      var toggleDataVal = 'subtotal';
      var sourceDataVal = $(this).data("division")
      $(this).siblings("[data-" + sourceData + "=" + sourceDataVal + "][data-" + toggleData + "=" + toggleDataVal + "]").slideToggle("slow");

      //toggleSubRows(evt, sourceData, toggleData, toggleDataVal) ;
      //console.log("Click even detected on", $(this));
      evt.stopPropagation();
    }
  );

  var total = 0;


});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-hover" id="recordTable">
  <tbody>
    <tr class="item1" data-cost-type="cost_type1" data-cost-level="total" data-cost-category="expense" data-division="item1">
      <th colspan="4" class="title-row-light">
        <span class="item1_title">
          <i class="fas fa-chevron-down padding-right-2rem"></i> item1 
        </span>
      </th>
      <th colspan="2" class="title-row-light subtotal">
        <span class="item1_subtotal" data-type="category_subtotal"></span>
      </th>

    </tr>

    <tr class="grouping_item1" id="item1_3053" data-cost-type="cost_type1" data-cost-level="subtotal" data-cost-category="expense" data-division="item1">
      <td class="item2_type">
        <span class="item2_type" id="3053_item2_type" data-type=item_item2_type data-category="expense">WRMS</span>
      </td>
      <td class="costcode">
        <span class="costcode" id="3053_costcode" data-type=item_costcode data-category="expense">27.0.0 item1
        </span>
      </td>
      <td class="rate">
        <span class="rate" id="3053_rate" data-type=item_rate data-category="expense">250.00 $/part</span>
      </td>
      <td class="quantity">
        <span class="quantity" id="3053_quantity"> 20,844.00 </span>
      </td>

      <td class="sub_total"> <span class="sub_total" id="3053_sub_total" data-type=item_sub_total data-category="expense"> 5211000.0000 </span>
      </td>
    </tr>

    <tr class="grouping_item1" id="item1_3053" data-cost-type="cost_type1" data-cost-level="subtotal" data-cost-category="expense" data-division="item1">
      <td class="item2_type">
        <span class="item2_type" id="3053_item2_type" data-type=item_item2_type data-category="expense">WRMS</span>
      </td>
      <td class="costcode">
        <span class="costcode" id="3053_costcode" data-type=item_costcode data-category="expense">27.0.0 item1
        </span>
      </td>
      <td class="rate">
        <span class="rate" id="3053_rate" data-type=item_rate data-category="expense">250.00 $/part</span>
      </td>
      <td class="quantity">
        <span class="quantity" id="3053_quantity"> 20,844.00 </span>
      </td>

      <td class="sub_total"> <span class="sub_total" id="3053_sub_total" data-type=item_sub_total data-category="expense"> 5211000.0000 </span>
      </td>
    </tr>

    <tr class="grouping_item1" id="item1_3053" data-cost-type="cost_type1" data-cost-level="subtotal" data-cost-category="expense" data-division="item1">
      <td class="item2_type">
        <span class="item2_type" id="3053_item2_type" data-type=item_item2_type data-category="expense">WRMS</span>
      </td>
      <td class="costcode">
        <span class="costcode" id="3053_costcode" data-type=item_costcode data-category="expense">27.0.0 item1
        </span>
      </td>
      <td class="rate">
        <span class="rate" id="3053_rate" data-type=item_rate data-category="expense">250.00 $/part</span>
      </td>
      <td class="quantity">
        <span class="quantity" id="3053_quantity"> 20,844.00 </span>
      </td>

      <td class="sub_total"> <span class="sub_total" id="3053_sub_total" data-type=item_sub_total data-category="expense"> 5211000.0000 </span>
      </td>
    </tr>

请注意,我包括(使用 Django 模板语言):

<script type="text/javascript" src="{% static 'js/jquery-3.3.1.js' %}"></script>

然后,要升级,我将其更改为

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.js"></script>

我的问题是为什么 slideToggle 速度不起作用以及如何解决?
Ps 我不认为拒绝投票是一个特别有用的功能。如果您解释了您需要帮助的内容(在本例中为片段),那么有问题的人就有足够的动力来解决问题。不过我很感激你的时间

标签: javascriptjquerytwitter-bootstrap

解决方案


滑动切换(56);使用时间而不是字符串。或使用带数字的整数变量。


推荐阅读