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>
Wie wäre es so etwas wie dieses '$ (this) .children(). Länge * 1000' statt' $ (this) .data ('height') * 1000'? – imtheman
Das ist eine großartige Idee, @imtheman! Vielen Dank! –
@imtheman Hmmm, das ist "1". –