如何计算slideToggle()的速度？

Question

我有一个带有多个手风琴样式子项的导航菜单。一些"父级"链接拥有比其他更多的子元素。我想要变化slideToggle()的速度，使得具有更多子元素的菜单需要更长时间的slideDown()。以下是我尝试过的代码，但它会因为某些原因跳来跳去。如您所见，根本没有任何缓动效果发生。

// Get the height of each list and save it in the data-height attribute
$('.main-nav > ul > li > ul').each(function() {
  $(this).slideDown(0);
  $(this).data('height', $(this).height());
  $(this).slideUp(0);
});

$('.main-nav > ul > li').click(function() {
  // Multiply the height of the element by the speed desired
  $(this).children().slideToggle($(this).data('height') * 1000, 'easeInOutExpo');
});

.main-nav {
  position: fixed;
  top: 0;
  left: 0;
}
.main-nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  font-size: 18px;
}
.main-nav ul li {
  padding: 22px 0;
  cursor: pointer;
}
.main-nav > ul {
  padding: 0 22px;
}
.main-nav > ul > li > ul {
  display: none;
}
*,
*:before,
*:after {
  box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<nav class="main-nav">
  <ul>
    <li>Global
      <ul>
        <li>Typography</li>
        <li>Colors</li>
        <li>Icons</li>
      </ul>
    </li>
    <li>Elements
      <ul>
        <li>Text</li>
        <li>Buttons</li>
        <li>Lists</li>
        <li>Tables</li>
        <li>Media</li>
      </ul>
    </li>
    <li>Controls
      <ul>
        <li>dropdown</li>
        <li>alerts</li>
        <li>badges</li>
        <li>modals</li>
      </ul>
    </li>
    <li>Layout
      <ul>
        <li>dynamic row</li>
        <li>flex</li>
      </ul>
    </li>
    <li>Components
      <ul>
        <li>cards</li>
        <li>banners</li>
        <li>itemEditor</li>
        <li>itemIndex</li>
        <li>jQueryUI</li>
        <li>login</li>
        <li>main</li>
        <li>details (and detail views)</li>
        <li>drilldown</li>
        <li>mega menu</li>
        <li>navigation</li>
        <li>search</li>
        <li>thick items</li>
        <li>widgets</li>
      </ul>
    </li>
  </ul>
</nav>

- Drazzah

---

这样怎么样 $(this).children().length * 1000，而不是 $(this).data('height') * 1000？ - imtheman

这是一个很棒的想法，@imtheman！非常感谢！ - Ian Hazzard

@imtheman 嗯，这返回“1”。 - Ian Hazzard

啊，我没意识到点击事件是在父级 li 上触发的。我已经添加了一个答案，展示了正确的做法（至少对于这种情况是正确的）。 - imtheman

Answer 1

建议根据ul中有多少个li元素来确定，而不是根据高度来确定（如果1000太慢，您可能需要修改乘数）。

// Get the height of each list and save it in the data-height attribute
$('.main-nav > ul > li > ul').each(function() {
  $(this).slideUp(0);
});

$('.main-nav > ul > li').click(function() {
  // Multiply the height of the element by the speed desired
  $(this).children().slideToggle($(this).find("li").length * 1000, 'easeInOutExpo');
});

.main-nav {
  position: fixed;
  top: 0;
  left: 0;
}
.main-nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  font-size: 18px;
}
.main-nav ul li {
  padding: 22px 0;
  cursor: pointer;
}
.main-nav > ul {
  padding: 0 22px;
}
.main-nav > ul > li > ul {
  display: none;
}
*,
*:before,
*:after {
  box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<nav class="main-nav">
  <ul>
    <li>Global
      <ul>
        <li>Typography</li>
        <li>Colors</li>
        <li>Icons</li>
      </ul>
    </li>
    <li>Elements
      <ul>
        <li>Text</li>
        <li>Buttons</li>
        <li>Lists</li>
        <li>Tables</li>
        <li>Media</li>
      </ul>
    </li>
    <li>Controls
      <ul>
        <li>dropdown</li>
        <li>alerts</li>
        <li>badges</li>
        <li>modals</li>
      </ul>
    </li>
    <li>Layout
      <ul>
        <li>dynamic row</li>
        <li>flex</li>
      </ul>
    </li>
    <li>Components
      <ul>
        <li>cards</li>
        <li>banners</li>
        <li>itemEditor</li>
        <li>itemIndex</li>
        <li>jQueryUI</li>
        <li>login</li>
        <li>main</li>
        <li>details (and detail views)</li>
        <li>drilldown</li>
        <li>mega menu</li>
        <li>navigation</li>
        <li>search</li>
        <li>thick items</li>
        <li>widgets</li>
      </ul>
    </li>
  </ul>
</nav>

- imtheman

Answer 2

$(this).data('height') 似乎未定义，因此你最终会将 NaN 作为第一个参数传递给 slideToggle() 函数。我不确定如何修复，但希望这能指引你朝正确的方向前进。

- Hans Strausl