创建一个菜单打开和关闭特效

最新推荐文章于 2021-06-03 14:13:57 发布

原创最新推荐文章于 2021-06-03 14:13:57 发布 · 387 阅读

0 ·

CC 4.0 BY-SA版权

JS 专栏收录该内容

72 篇文章

订阅专栏

这篇博客展示了一个HTML菜单的实现，通过JavaScript控制菜单的展开和收起。当鼠标悬停在图片上时，图片会改变，点击图片则会显示或隐藏下级菜单。内容包括CSS样式定义、JavaScript事件监听以及图片切换逻辑。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>开发菜单栏的开启关闭按钮</title>
    <script type="text/javascript" src="$function.js"></script>

    <style>
        #divid{
            width: 100px;
            height: 18px;
            line-height:18px;
        }
        .divclass:hover{
            background:lightskyblue;
        }
        #divid >img{
            width: 10px;
            height: 10px;
        }
        #content{
            width:100px;
            height: 100px;
            /*background: red;*/
        }
        #content #content_in{
            margin-left:10px;
            /*background:skyblue;*/
            display: none;
        }
        .image{
            width: 10px;
            height: 10px;
        }
        
    </style>
</head>
<body>
<div id="divid" class="divclass">
    <img src="images/1.png" id="imageid" class="image">
    我的电脑
</div>
<div id="content">
    <div id="content_in">
        <div class="divclass"><img src="images/1.png" id="imageid1" class="image">系统</div>
        <div class="divclass"><img src="images/1.png" id="imageid2" class="image">软件</div>
        <div class="divclass"><img src="images/1.png" id="imageid3" class="image">文档</div>
        <div class="divclass"><img src="images/1.png" id="imageid4" class="image">娱乐</div>
    </div>
    <div id="divids" class="divclass" >
        <img src="images/1.png" id="imageids" class="image" onclick="clk()">
        我的磁盘
    </div>
</div>

<script>
    //判断这几张图片的点击状态
     $("imageid").onclick = function(){
         /*
          获取点击对象内元素的时候 , 尽量使用event.target.id，不要使用this.id。
          当使用事件委托的时候，this指向的是绑定监听事件的元素，而非被点击的元素。
          event.target.id则始终指向被点击的元素。
          *///event.target.src
         var src = this.getAttribute("src");
        if(src == "images/1.png"){
            this.src = "images/2.png";
        }else if(src == "images/3.png"){
            this.src = "images/4.png";
        }else if(src == "images/2.png"){
            this.src = "images/1.png";
        }else if(src == "images/4.png"){
            this.src = "images/3.png";
        }
         xianshi();
    }
    //点击后调用此方法,使隐藏的下级div块显示出来,再次点击后隐藏
    function xianshi(){
        var a = $("content_in").style.display;
        $("content_in").style.display= "block";
        if(a == "block"){
            $("content_in").style.display= "none";
        }
    }

    //判断鼠标的指针是否在图片之上
    $("imageid").onmouseover = function(){
        var src = this.getAttribute("src");
        if(src == "images/1.png"){
            this.src = "images/3.png";
        }else if(src == "images/2.png"){
            this.src = "images/4.png";
        }
    }

    //判断鼠标的指针是否移开图片
    $("imageid").onmouseout = function(){
        var src = this.getAttribute("src");
        if(src == "images/3.png"){
            this.src = "images/1.png";
        }else if(src == "images/4.png"){
            this.src = "images/2.png";
        }
    }
</script>
</body>
</html>