如何計算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()函數，我不知道修復是什么，但希望這會指向你正確的方向