扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >用纯JS实现二级菜单效果
  • 867

0
分享到

用纯JS实现二级菜单效果

2024-04-02 19:04:59 867人浏览 薄情痞子
摘要

本文实例为大家分享了js实现二级菜单效果的具体代码，供大家参考，具体内容如下 js点击出现二级菜单，点击二级菜单主菜单换成二级菜单 点击出现二级菜单 <style>

本文实例为大家分享了js实现二级菜单效果的具体代码，供大家参考，具体内容如下

js点击出现二级菜单，点击二级菜单主菜单换成二级菜单

点击出现二级菜单


<style>
*{
                margin:0px auto;
                padding:0px;
                }
            .yiji{
                width:200px;
                height:40px;
                background-color:red;
                color:#fff;
                text-align:center;
                line-height:40px;h
                vertical-align:middle;
                border:1px solid #FFF;
                }
            .erji1{
                width:200px;
                height:40px;
                background-color:#F63;
                color:#fff;
                text-align:center;
                line-height:40px;
                vertical-align:middle;
                border:1px solid #FFF;
                }
            #erji2{
                display:none;
                                }
                 
            #erji3{
                display:none;
                                }
                 
            #erji4{
                display:none;
                                }
             
        </style>
    </head>
     
    <body>
        <div class="yiji" onclick="Show('erji2')">首页</div>
        <div id="erji2">
            <div class="erji1">1</div>
            <div class="erji1">1</div>
            <div class="erji1">1</div>
             
        </div>
         
        <div class="yiji" onclick="Show('erji3')">人才</div>
        <div id="erji3">
            <div class="erji1">1</div>
            <div class="erji1">1</div>
            <div class="erji1">1</div>
             
        </div>
         
        <div class="yiji" onclick="Show('erji4')">市场</div>
        <div id="erji4">
            <div class="erji1">1</div>
            <div class="erji1">1</div>
            <div class="erji1">1</div>
        </div>
    </body>
    <script type="text/javascript">
                function Show(a)
        {
            var a = document.getElementById(a);
            if(a.style.display == "block")
            {
                a.style.display = "none";  
            }
            else
            {
                a.style.display = "block";
            }
        }   

</script>  


#caidan{
        width:200px;
        height:40px;
        border:1px solid #999;
        text-align:center;
        line-height:40px;
        vertical-align:middle;
        }
     .list{
       width:200px;
       height:40px;
       border:1px solid #999;
       border-top-width:0px;
       text-align:center;
       line-height:40px;
       vertical-align:middle;
       display:none;
     }
      #caidan,.list:hover{
     cursor:pointer;
                 
   }
  .list:hover{
                 
   background-color:#63F;
}

<div style="width:200px; height:400px;">
   <div id="caidan" onclick="Show()">中国</div>
   <div class="list" onclick="Xuan(this)">山东</div>
   <div class="list" onclick="Xuan(this)">济南</div>
   <div class="list" onclick="Xuan(this)">济宁</div>
   <div class="list" onclick="Xuan(this)">威海</div>
   <div class="list" onclick="Xuan(this)">淄博</div>
</div>

function Show()
        {
            var list = document.getElementsByClassName("list");
             
            //显示列表
            for(var i=0;i<list.length;i++)
            {
                list[i].style.display = "block";   
            }  
        }
         
        function Xuan(a)
        {
            var c = document.getElementById("caidan");
            c.innerhtml = a.innerHTML;
             
            var list = document.getElementsByClassName("list");
            //显示列表
            for(var i=0;i<list.length;i++)
            {
                list[i].style.display = "none";
            }  
                 
        }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

--结束END--

本文标题: 用纯JS实现二级菜单效果

本文链接: https://lsjlt.com/news/124388.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 用纯JS实现二级菜单效果
    本文实例为大家分享了JS实现二级菜单效果的具体代码，供大家参考，具体内容如下 js点击出现二级菜单，点击二级菜单主菜单换成二级菜单 点击出现二级菜单 <style> ...
    99+
    2024-04-02
  • 纯css如何实现二级菜单
    这篇“纯css如何实现二级菜单”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“纯css如何实现二级菜单”文章吧。HTML结构设...
    99+
    2023-07-05
  • js仿小米二级菜单显示效果
    本文实例为大家分享了js仿小米二级菜单显示效果的具体代码，供大家参考，具体内容如下 提示：以下是本篇文章正文内容，下面案例可供参考 一、效果展示 二、代码 1.页面样式 代码如下（...
    99+
    2024-04-02
  • JS如何实现五级联动菜单效果
    这篇文章主要为大家展示了“JS如何实现五级联动菜单效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“JS如何实现五级联动菜单效果”这篇文章吧。js实现多级联动的...
    99+
    2024-04-02
  • bootstrap如何实现二级下拉菜单效果
    这篇文章将为大家详细讲解有关bootstrap如何实现二级下拉菜单效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。具体内容如下<!DOCTYPE htm...
    99+
    2024-04-02
  • CSS中怎么实现二级弹出菜单效果
    这篇文章将为大家详细讲解有关CSS中怎么实现二级弹出菜单效果，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。具体代码如下：<!DOCTYPE ...
    99+
    2024-04-02
  • vue实现多级菜单效果
    本文实例为大家分享了vue实现多级菜单效果的具体代码，供大家参考，具体内容如下 效果图： 效果说明： 点击父菜单，如果有子菜单就在其左侧显示出子菜单 思路： 通过递归的方式。 代码...
    99+
    2024-04-02
  • 纯css怎样实现多级折叠菜单折叠树效果
    这篇文章将为大家详细讲解有关纯css怎样实现多级折叠菜单折叠树效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。运用checkbox的checked值来判断下级栏目是否展开，CSS3的选择器中提供了:ch...
    99+
    2023-06-08
  • 怎么用CSS实现鼠标滑过显示子菜单的二级菜单效果
    本篇内容介绍了“怎么用CSS实现鼠标滑过显示子菜单的二级菜单效果”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所...
    99+
    2024-04-02
  • js如何实现下拉菜单效果
    这篇文章将为大家详细讲解有关js如何实现下拉菜单效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。效果图：代码如下：<!DOCTYPE html> ...
    99+
    2024-04-02
  • js如何实现二级联动效果
    这篇文章主要介绍js如何实现二级联动效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！示例代码：<!DOCTYPE html> <html> <...
    99+
    2024-04-02
  • jquery如何实现多级菜单效果
    这篇文章将为大家详细讲解有关jquery如何实现多级菜单效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。具体内容如下<!DOCTYPE html>...
    99+
    2024-04-02
  • vue如何实现多级菜单效果
    这篇文章主要介绍了vue如何实现多级菜单效果的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue如何实现多级菜单效果文章都会有所收获，下面我们一起来看看吧。效果图：效果说明：点击父菜单，如果有子菜单就在其左侧显...
    99+
    2023-07-02
  • 使用python实现省市三级菜单效果
    地区分三层结构例如: 大中华地区一级划分: 华东 华中 华北 西南 特别行政区 华南 ------------------------------------------------- 请输入你要查看的大中...
    99+
    2022-06-04
    省市 菜单 效果
  • Jquery实现带动画效果的经典二级导航菜单
    以下是一个使用jQuery实现带动画效果的经典二级导航菜单的示例代码：HTML代码：```htmlAnimated SubmenuH...
    99+
    2023-08-14
    JQuery
  • Jquery怎么实现带动画效果的二级导航菜单
    要实现带动画效果的二级导航菜单，可以使用jQuery的`slideDown()`和`slideUp()`方法来实现菜单的展开和收起动...
    99+
    2023-08-15
    Jquery
  • 怎么使用纯CSS实现圆形导航菜单效果
    小编给大家分享一下怎么使用纯CSS实现圆形导航菜单效果，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！直接上代码css：body {    background-color:...
    99+
    2023-06-14
  • 纯js实现轮播图效果
    本文实例为大家分享了js实现轮播图效果的具体代码，供大家参考，具体内容如下 结合我们前面学过的：鼠标监听事件（移入移出、点击），创建节点，排他思想、定时器等，就可以实现一个能手动和自...
    99+
    2024-04-02
  • 纯js实现打字机效果
    本文实例为大家分享了js实现打字机效果的具体代码，供大家参考，具体内容如下 效果图 应用场景 用处不大，只是看到网上有类似的效果，写了四五十行看不懂的代码，于是尝试能不能简单的实现...
    99+
    2024-04-02
  • 怎么用CSS实现三级下拉菜单效果
    这篇文章主要介绍“怎么用CSS实现三级下拉菜单效果”，在日常操作中，相信很多人在怎么用CSS实现三级下拉菜单效果问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么用CSS实现...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作