js 简单下拉菜单

最新推荐文章于 2022-04-09 10:45:23 发布

i will do it

最新推荐文章于 2022-04-09 10:45:23 发布

阅读量119

点赞数 1

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/weixin_47935275/article/details/115638460

版权

CSS JavaScript 下拉菜单交互效果事件监听

关键词由CSDN通过智能技术生成

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .main {
            margin-left: 20px;
            margin-top: 20px;
        }
        
        ul {
            list-style: none;
            display: none;
        }
        
        h4 {
            position: relative;
            display: block;
            width: 76px;
            height: 40px;
            font-size: 15px;
            text-align: center;
            line-height: 40px;
        }
        
        span {
            display: block;
            position: absolute;
            top: 15px;
            right: 5px;
            background: url(images/icon.png) no-repeat 0 -976px;
            width: 10px;
            height: 10px;
        }
        
        ul li {
            width: 76px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            border: 1px solid orange;
            font-size: 15px;
            background-color: #fff;
            color: #333;
        }
    </style>

<div class="main">
        <h4>微博<span></span></h4>
        <ul>
            <li>私信</li>
            <li>评论</li>
            <li>@我</li>
        </ul>
</div>


    <script>
        var getul = document.querySelector('ul');     //获取ul对象
        var lis = document.querySelectorAll('li');	  //获取li对象
        var geth = document.querySelector('h4');      //获取h4对象
        var gets = document.querySelector('span');    //获取span对象
        geth.onclick = function() {                   //点击h4对象
            getul.style.display = 'block';            //显示ul
            this.style.backgroundColor = 'rgba(204,204,204)';  //更换h4背景颜色
        }
        for (var i = 0; i < lis.length; i++) {        //遍历li
            lis[i].onmouseover = function() {         //鼠标放在li上面
                this.style.color = 'red';
                this.style.backgroundColor = '#fff5da'
            }
            lis[i].onmouseout = function() {           //鼠标离开li
                this.style.color = '#4c4c4c';
                this.style.backgroundColor = '';
            }
        }
   </script>