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の場合は乗数を変更する必要があります）あなたにとっては遅すぎる）。この `$（この）.children（）。長さ* 1000 'の代わりに` $（この）.dataセクション（ '高さ'）の*のようなものについて

// 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')未定義のように見えるので、それはあなたがslideToggle()関数への最初の引数としてNaNを渡してしまう、私は修正が何であるかわからないことが表示されますが、うまくいけば、あなたをポイントします正しい方向に