Question

我创建了一个切换菜单，例如DEMO。

我为div.nav-menu添加了css过渡效果，并使用了max-height:0;来max-height:480px;。

单击菜单切换以显示菜单时，转换工作正常。但是，当我单击菜单切换以再次隐藏菜单时，转换现在不起作用。

我做错了什么？

Answer 1

你对CSS Transitions有误。当您添加或删除类时，不会生成动画，只有在更改CSS属性时才会生成动画。 您正在直接添加和删除类。

以下是您的解决方案：

$( '.menu-toggle' ).on( 'click', function() { if(nav.hasClass('toggled-on')) { menu.css('maxHeight', 0); //^ Here is changed the 'max-height` first so that the // Transition animation will trigger first } else menu.css('maxHeight', '480px'); // ^ If not I changed it back to 480px; } ); // Next I bind on the transaction end event of the element to toggle class // After it finishes the transistion menu.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function() { nav.toggleClass( 'toggled-on' ); });

Updated Fiddle

Answer 2

有一种更简单的方法来获得你想要的效果。

<强> Working Example

js

$(function() {
    $('.menu-toggle').click(function(){
        if($('.nav-menu').is(':hidden')){ // check to see if menu is hidden
            $('.nav-menu').slideDown();}  // if so slide down
        else{$('.nav-menu').slideUp();}   // else slide up
    });
});

CSS

html {
    font-size: 100%;
    overflow-y: scroll;
}
body {
    max-width: 860px;
    margin: 0 auto;
    font-family: Helvetica, sans-serif;
}
.main-navigation {
    clear: both;
    min-height: 45px;
    margin-top: 30px;
    position: relative;
}
.menu-toggle {
    cursor: pointer;
    display: inline-block;
    font: bold 16px/1.3;
    margin: 0;
    padding: 10px;
    color: #fff;
    background-color: #1e1e1e;
}

.nav-menu {

    margin: 0;
    background-color: #1e1e1e;
    display: none;
    overflow: hidden;
}

.nav-menu ul {
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
}
.nav-menu li {
    display: block;
    padding: 10px;
}
.nav-menu li a {
    display: block;
    padding:10px;color:#fff;line-height:1;
    text-decoration: none;
}
.nav-menu li a:hover,.nav-menu li a:focus{background:#272727;}
.toggled-on li a:active{background:#2A8A15;}

API for .slideUp()和API for .slideDown()

Answer 3

代替使用max-height使用高度

Get-Certificate

CSS转换在toggleClass（）之后不起作用

3 个答案: