【为什么display：inline-block水平的下拉菜单会先上升后下降 _布局】

为什么display：inline-block水平的下拉菜单会先上升后下降

我也踩过这个坑( 1 )

已统计您的踩坑,无需重复点击

回答(0)

布局

详细描述

截图

代码

 <style>
        ul {
            display: inline-block;
            background: red;
            margin: 0;
            max-height: 0;
            overflow: hidden;
            transition: all 5s;
        }

        div {
            background: black;
            color: #fff;
        }
    </style>
</head>

<body>
    <button>点击触发</button>
    <div class="drop-contaienr">
        <ul>
            <li>下拉列表选项</li>
            <li>下拉列表选项</li>
            <li>下拉列表选项</li>
            <li>下拉列表选项</li>
        </ul>
    </div>
    <script>
        var log = console.log;
        var btn = document.querySelector('button'),
            ul = document.querySelector('ul');
        btn.onclick = function () {

            ul.style['max-height'] = '300px';
        }
    </script>

编辑于2024-11-19