Как рассчитать скорость для 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

Вместо того, чтобы идти на основе высоты, я бы рекомендовал перейти от количества li элементов в ul (вам может потребоваться изменить множитель, если 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 в качестве первого арг функции slideToggle(), я не уверен, что исправление, но мы надеемся, что указывает вам в правильном направлении