简单制作下拉图

不是你的波

于 2022-04-21 00:18:41 发布

阅读量244

点赞数

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/weixin_69317131/article/details/124310960

版权

 <ul class="xiala">
        <li>
            <a href="">社区</a>
            <ul>
                <li>咨询</li>
                <li>咨询</li>
                <li>咨询</li>
            </ul>
        </li>
        <li>
            <a href="">社区</a>
            <ul>
                <li>咨询</li>
                <li>咨询</li>
                <li>咨询</li>
            </ul>
        </li>
        <li>
            <a href="">社区</a>
            <ul>
                <li>咨询</li>
                <li>咨询</li>
                <li>咨询</li>
            </ul>
        </li>
        <li>
            <a href="">社区</a>
            <ul>
                <li>咨询</li>
                <li>咨询</li>
                <li>咨询</li>
            </ul>
        </li>
        <li>
            <a href="">社区</a>
            <ul>
                <li>咨询</li>
                <li>咨询</li>
                <li>咨询</li>
            </ul>
        </li>
    </ul>
<script>
        var xiala = document.querySelector('.xiala');
        var lis = xiala.children //获得四个li
        for (var i = 0; i < lis.length; i++) {
            lis[i].onmouseover = function() {
                this.children[1].style.display = 'block';
            }
            lis[i].onmouseout = function() {
                this.children[1].style.display = 'none';
            }
        }
    </script>