Question

LTLFTP在这里。

我终于遇到了一个问题，似乎只有你能解决。我试图创建一个手风琴风格的菜单，我想要一个过渡效果。问题是，每当我更改max-height属性时，转换都以错误的顺序发生，转换持续时间不同，并且会出现神秘的延迟。

对这个小问题的任何见解都会很精彩。提前致谢。这是代码：

＆＃13;

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css\default.css">
<style>
    .content {
        margin-top: 50px;
        width: 1024px;
        margin-left: auto;
        margin-right: auto;
        background-color: #fefefe;
        border: 1px solid #888;
        padding: 1em;
    }

    .title {
        text-align: center;
    }

    .dresser {
        border: 1px solid #888;
        padding: auto 1em;
    }

    .dresser h2 {
        margin: 0px;
        padding: 2px;
        background-color: #888;
        color: #fefefe;
        cursor: pointer;
    }

    .drawer {
        padding: 0em 1em;
        overflow-y: hidden;
        max-height: 0px;
        transition-property: max-height;
        transition-duration: 2s;
    }
</style>
</head>
<body onload="enableDresser();">
    <div class="content">
        <div class="title">
            <h1>Dashboard</h1>
        </div>
        <div class="dresser">
            <h2 class="drawerLabel"> <span>▸</span> Contact</h2>
            <div class="drawer">
                <h1>Stuff</h1>
            </div>
            <h2 class="drawerLabel"> <span>▸</span> Links</h2>
            <div class="drawer">
                <h1>Stuff</h1>
            </div>
            <h2 class="drawerLabel"> <span>▸</span> Documents</h2>
            <div class="drawer">
                <h1>Stuff</h1>
            </div>
<!--        <h2 class="drawerLabel"> <span>▸</span> Guides</h2>
            <div class="drawer">
                <h1>Stuff</h1>
                
            </div>-->
        </div>
    </div>
    <script type="text/javascript">

        var drawerLabels = document.getElementsByClassName("drawerLabel");
        //console.log(drawerLabels);

        function enableDresser() {
            for (var i = 0; i < drawerLabels.length; i++) {
                drawerLabels[i].onclick = function() {
                    openDrawer(this);
                }
            }

            openDrawer(drawerLabels[1]);
        }
        function closeDresser() {
            for (i=0; i<drawerLabels.length; i++) {
                drawerLabels[i].firstElementChild.innerHTML = "▸";
                drawerLabels[i].nextElementSibling.style.maxHeight = "0px";
            }
        }

        function openDrawer(labelElement) {
            closeDresser();
            labelElement.firstElementChild.innerHTML = "▾";
            labelElement.nextElementSibling.style.maxHeight = "1000px";
        }

    </script>
</body>
</html>

＆＃13;

最大高度转换以错误的顺序发生

0 个答案: