Html CSS转换堆叠？

我正在使用CSS来滑动菜单。对于JS，我只添加了一个类来触发CSS动画。在桌面模式下，菜单由4列列表项组成。在移动模式下，菜单将折叠，只保留标题。可单击标题以打开菜单

我的菜单运行正常，但向下滑动的动画与向上滑动的动画不同。向上滑动速度也较慢/起步较晚。我不明白为什么会发生这种情况，我希望向下滑动和向上滑动的效果相同

请参阅我的JSFIDLE：

HTML

JavaScript

您正在设置“最大高度”属性的动画。它的动画从0px到500px，然后再回来。但是，要设置动画的div小于500px

这就是为什么在结束动画中会出现延迟

我通常解决这个问题的方法是使用JavaScript在元素上设置max height属性。

请在&+div中设置

请试试这个

---

你的意思是用JS来确定高度，然后用JS给它添加一个样式：max height:？是的，这就是我的意思！

<div class="site-footer">
    <div class="row">
        <div class="col-25p">
            <span class="footer-heading">Heading 1</span>
            <div>
                <ul>
                    <li><a href="#">Sub 1</a></li>
                    <li><a href="#">Sub 2</a></li>
                    <li><a href="#">Sub 3</a></li>
                    <li><a href="#">Sub 4</a></li>
                    <li><a href="#">Sub 5</a></li>
                </ul>
            </div>
        </div>
        <div class="col-25p">
            <span class="footer-heading">Heading 2</span>
            <div>
                <ul>
                    <li><a href="#">Sub 1</a></li>
                    <li><a href="#">Sub 2</a></li>
                    <li><a href="#">Sub 3</a></li>
                    <li><a href="#">Sub 4</a></li>
                    <li><a href="#">Sub 5</a></li>
                </ul>
            </div>
        </div>
        <div class="col-25p">
            <span class="footer-heading">Heading 3</span>
            <div>
                <ul>
                    <li><a href="#">Sub 1</a></li>
                    <li><a href="#">Sub 2</a></li>
                    <li><a href="#">Sub 3</a></li>
                    <li><a href="#">Sub 4</a></li>
                    <li><a href="#">Sub 5</a></li>
                </ul>
            </div>
        </div>
        <div class="col-25p">
            <span class="footer-heading">Heading 4</span>
            <div>
                <ul>
                    <li><a href="#">Sub 1</a></li>
                    <li><a href="#">Sub 2</a></li>
                    <li><a href="#">Sub 3</a></li>
                    <li><a href="#">Sub 4</a></li>
                    <li><a href="#">Sub 5</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

.site-footer {
font-size: 1.3rem;

.footer-heading {
    display: block;
    color: black;
    font-weight: bold;
    font-size: 18px;
    padding-top: 4px;

    &:hover{
        cursor: pointer;

        @media (min-width: 768px){
            cursor: default;
        }
    }

    &::after {
        font-family: "FontAwesome";
        float: right;
        content: "\f078";
        transition-property: all;
        transition-duration: 0.5s;

        @media (min-width: 768px){
            content: "";
        }
    }

    &.open{
        &::after{
            transform: rotate(180deg);
        }

        & + div{
            max-height:500px;
            //transition:all 500ms ease;
            transition-property: all;
            transition-duration: 1s;
            transition-timing-function: cubic-bezier(0.17, 0.04, 0.03, 0.94);
        }
    }


    & + div {
        overflow-y: hidden;
        max-height: 0;
        transition-property: all;
        transition-duration: 1s;
        transition-timing-function: cubic-bezier(0.17, 0.04, 0.03, 0.94);

        @media (min-width: 768px){
            max-height: 500px;
        }
    }

}

ul {
    list-style: none;
    padding-left: 0px;

    li {
        padding-top: 4px;
        padding-bottom: 4px;

        a {
            color: black;
            text-decoration: none;

            &:hover {
                text-decoration: underline;

            }
        }
    }
}
}


.col-25p{
  @media (min-width: 768px){
    float:left;
    width: 25%;
  }
}

$('.site-footer .footer-heading').click(function(){
        $(this).toggleClass('open');
    });

transition:all 500ms ease;
transition-duration: 1s;
transition-timing-function: cubic-bezier(0.17, 0.04, 0.03, 0.94);

.site-footer {
    font-size: 1.3rem;

    .footer-heading {
        display: block;
        color: black;
        font-weight: bold;
        font-size: 18px;
        padding-top: 4px;

        &:hover{
            cursor: pointer;

            @media (min-width: 768px){
                cursor: default;
            }
        }

        &::after {
            font-family: "FontAwesome";
            float: right;
            content: "\f078";
            transition:all 500ms ease;
            transition-duration: 1s;
            transition-timing-function: cubic-bezier(0.17, 0.04, 0.03, 0.94);

            @media (min-width: 768px){
                content: "";
            }
        }

        &.open{
            &::after{
                transform: rotate(180deg);
            }

            & + div{
               max-height:500px;
               transition:all 500ms ease;
               transition-property: all;
               transition-duration: 1s;
               transition-timing-function: cubic-bezier(0.17, 0.04, 0.03, 0.94);
            }
        }


        & + div {
            overflow-y: hidden;
            max-height: 0;
            transition-property: all 500ms ease;
            transition-duration: 0.3s;
            transition-timing-function: cubic-bezier(0.17, 0.04, 0.03, 0.94);

            @media (min-width: 768px){
                max-height: 500px;
            }
        }

    }

    ul {
        list-style: none;
        padding-left: 0px;

        li {
            padding-top: 4px;
            padding-bottom: 4px;

            a {
                color: black;
                text-decoration: none;

                &:hover {
                    text-decoration: underline;

                }
            }
        }
    }
}


.col-25p{
  @media (min-width: 768px){
    float:left;
    width: 25%;
  }
}