2016-07-22 23 views
3

Ich habe ein Navigationsmenü mit mehreren Akkordeon-artigen Elementen. Einige "Eltern" -Links haben mehr Kinder als andere. Ich möchte die Geschwindigkeit des slideToggle() so variieren, dass diejenigen mit mehr Kindern länger dauern, um slideDown(). Hier ist, was ich versucht habe, aber es springt aus irgendeinem Grund herum. Es gibt überhaupt keine Entspannung, wie Sie sehen können.So berechnen Sie eine Geschwindigkeit für SlideToggle()

// 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>

+0

Wie wäre es so etwas wie dieses '$ (this) .children(). Länge * 1000' statt' $ (this) .data ('height') * 1000'? – imtheman

+0

Das ist eine großartige Idee, @imtheman! Vielen Dank! –

+0

@imtheman Hmmm, das ist "1". –

Antwort

1

Anstatt basierend auf Höhe zu gehen, würde ich empfehlen basierend darauf, wie viele li Elemente sind in der (Sie müssen möglicherweise den Multiplikator ändern, wenn 1000 ist zu langsam für dich).

// 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>

0

$(this).data('height') erscheint nicht definiert werden, so scheint es, dass Sie NaN als erste arg in die slideToggle() Funktion übergeben am Ende, ich bin nicht sicher, was die Lösung ist, aber hoffentlich, dass die Punkte Sie in die richtige Richtung