如何计算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> 

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> 

Answer 2

$(this).data('height')似乎是未定义的，所以看起来你最终将NaN作为第一个arg传递给了slideToggle()函数，我不知道修复是什么，但希望这会指向你正确的方向