开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js实现点击菜单

在JavaScript中实现点击菜单通常涉及到HTML、CSS和JavaScript的结合使用。以下是一个简单的示例，展示了如何创建一个可点击的菜单，并在点击时显示或隐藏子菜单。

HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Click Menu Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <ul class="menu">
        <li><a href="#">Menu 1</a>
            <ul class="submenu">
                <li><a href="#">Submenu 1.1</a></li>
                <li><a href="#">Submenu 1.2</a></li>
            </ul>
        </li>
        <li><a href="#">Menu 2</a>
            <ul class="submenu">
                <li><a href="#">Submenu 2.1</a></li>
                <li><a href="#">Submenu 2.2</a></li>
            </ul>
        </li>
    </ul>
    <script src="script.js"></script>
</body>
</html>

CSS样式

/* styles.css */
.menu {
    list-style-type: none;
    padding: 0;
}

.menu > li {
    position: relative;
    display: inline-block;
}

.menu a {
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    color: #333;
}

.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    border: 1px solid #ccc;
    list-style-type: none;
    padding: 0;
    min-width: 150px;
}

.submenu li {
    display: block;
}

.submenu a:hover {
    background-color: #f0f0f0;
}

JavaScript代码

// script.js
document.addEventListener('DOMContentLoaded', function() {
    const menuItems = document.querySelectorAll('.menu > li');

    menuItems.forEach(item => {
        item.addEventListener('click', function(event) {
            event.stopPropagation(); // Prevent the click event from bubbling up to the document
            const submenu = this.querySelector('.submenu');
            if (submenu) {
                submenu.style.display = submenu.style.display === 'block' ? 'none' : 'block';
            }
        });
    });

    // Close the submenu when clicking outside of it
    document.addEventListener('click', function() {
        const submenus = document.querySelectorAll('.submenu');
        submenus.forEach(submenu => {
            submenu.style.display = 'none';
        });
    });
});

解释

HTML结构：创建了一个包含主菜单和子菜单的列表。
CSS样式：定义了菜单和子菜单的基本样式，并设置子菜单默认隐藏。
JavaScript代码：
- 在文档加载完成后，为每个主菜单项添加点击事件监听器。
- 点击主菜单项时，显示或隐藏其对应的子菜单。
- 点击页面其他地方时，隐藏所有子菜单。

优势

简单易懂：代码结构简单，易于理解和维护。
交互性强：用户可以通过点击来显示或隐藏子菜单，提高了用户体验。
可扩展性：可以轻松添加更多的菜单项和子菜单项。

应用场景

网站导航：适用于网站的顶部或侧边栏导航。
应用界面：适用于桌面或移动应用的菜单系统。

通过这种方式，你可以实现一个基本的点击菜单功能，并根据需要进行扩展和定制。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

最简单的纯js实现点击展开二级菜单功能

我最近就遇到做个点击展开二级菜单的要求，当然只能用原生的JS去写来实现，我借鉴了网上的一个案例，补充一下，分享一下：如果，默认打开页面进来时二级菜单是隐藏的，需要点击才能展现二级菜单，再点击就是隐藏二级菜单...这里有两个点，实现展现和隐藏用display=”block“和display=”none”,另外就是要做一个判断，if else的判断当前是block还是none。 <!...2 二级菜单2 二级菜单2 二级菜单2 二级菜单2...如果，你的页面默认进来二级菜单是展现的，点击时才关闭。直接把style标签的样式display=”none”去掉就可以。同时需要修改一下js。...sub_menu.style.display = "none"; } 仔细看，不然你就会发现你需要点击两次才会出现想要的效果

4.3K2 0

js通过点击实现文件下载

2017-05-02 13:57:38 一般情况下通过a标签可以实现下载效果，比如一般的文件类的，但是如果是图片则大部分的浏览器都会跳转的一个页面进行显示图片，而不是下载。...html部分代码点击下载 js部分代码 function download(src) { var...window, 0, 0, 0, 0, 0, false, false, true, false, 0, null); $a.dispatchEvent(evObj); }; 如此，便可以通过点击来实现下载的效果

26.6K3 0

js代码实现下拉菜单

效果 js代码： function ShowSub(li) {//函数定义 var subMenu = li.getElementsByTagName

8.3K3 0

vue 点击菜单动态生成Tab

UI 组件采用element NavMenu点击左侧的菜单列表生成Tab，如下图 ?...查看效果链接主要思路（1）点击菜单列表的时生成tab数据（2）点击tab 展示当前激活tab的信息（3）点击关闭按钮移除tab的数据，如果删除的是当前激活的tab，激活的tab前移或后移（删除tab...的前一个或者后一个）（4）采用动态组件展示每个tab的具体内容这个例子中菜单列表没有采用路由跳转，采用路由与不采用路由跳转动态生成Tab 的原理都是一样的。

4.3K3 0

js树形菜单

DOCTYPE html> 树形菜单 js/tree.js"> <!...cover; background-repeat: no-repeat; } /*.test{display: block;background-repeat: no-repeat;}*/ 第三部：JS...设计 /*树形菜单：冒泡排序*/ var menu,subMenus,menuIcon; function init(){ menuArray=document.getElementById('outerul

591 0

原生JS实现苹果菜单栏

分享一个由原生JS实现的苹果菜单栏效果，效果如下：实现的代码如下：原生JS...实现苹果菜单栏 body { margin: 0; } #div0 {...var dis = Math.sqrt(a * a + b * b); //用当前连线距离除以100与1求差 //实现鼠标相对于图片越近比例越大

6.9K1 0

ajax实现简单的点击左侧菜单，右侧加载不同网页

实现：ajax实现点击左侧菜单，右侧加载不同网页（在整个页面无刷新的情况下实现右侧局部刷新，用到ajax注意需要在服务器环境下运行，从HBuilder自带的服务器中打开浏览效果即可）图片.png 原理...：ajax的局部刷新原理：通过.load()重新加载页面中的某一部分，巧妙的借助data-*的自定义属性来存储数据，点击的时候修改锚点，因为地址有变，所以刷新的时候仍然会保持当前的页面内容而不是切换到第一个...遇到ajax局部刷新的需求也有很多，有时候比较简单，当内容较少，适合做成选项卡，如果网页的左侧有一个列表，点击列表使右侧的内容进行切换，如果右侧的内容过多，不适合做选项卡，这时候用.load()局部刷新最好不过了.../style> js

3.4K5 0

实现Bootstrap导航鼠标悬停下拉菜单及下拉主菜单可点击效果

，如果我们需要实现主菜单可以点击打开，而且下拉菜单实现悬停下拉的效果则需要进行调整JS脚本。...第一、实现悬停下拉菜单效果 1、修改bootstrap.js文件 2、添加脚本 $(document).ready(function(){ dropdownOpen(); }); function dropdownOpen...第二、实现主导航可点击打开 $(document).ready(function(){ $(document).off('click.bs.dropdown.data-api'); }); 添加脚本到bootstrap.js...文件中，可以实现主导航的可点击打开。...总结，这样我们的Bootstrap菜单导航可以实现鼠标悬停展开，以及主导航的点击打开。本文出处：老蒋部落 » 实现Bootstrap导航鼠标悬停下拉菜单及下拉主菜单可点击效果 | 欢迎分享

3.8K6 0

js控制json生成菜单——自制菜单

js控制json生成菜单——自制菜单（一）此文档解决以下问题： 1.JSON文件的书写方式 2.jQuery.getJSON()的运用 3.jQuery.each()的运用 4.jQuery的DOM... js/jquery..._3.3.1_jquery.min.js"> js/navtab.js"> ...4子1", "navUrl": "test.html", "navParentId": 9 } ] 1 $(function() {3.navtab.js...$("li.1").siblings().children("ul").slideUp(); //6.为一级菜单绑定点击事件

3322 0

点击菜单选项，右侧主体区新增子界面（Tab）的实现

今天记录一下一种前端页面的效果的实现，这种效果很常见，一般用于网站后台系统的前端页面。一般后台系统会分为顶部导航栏，左边的菜单栏和右边的主体区。...有一种效果是这样的，当点击左边菜单的时候，在右边的主体区会弹出相应的页面，点击多个菜单选项时，在右边依次陈列这些窗口，这些窗口之间可以相互切换，类似于浏览器的多个打开的窗口那样。...2.核心实现在上面三个方法的基础上，使用js向每个方法传递一些可变的参数，就可以实现执行方法，新建/删除/切换窗口的操作。...因为本片目的是演示点击菜单，新增窗口的功能，所以，我尽可能的对界面的设计简化，左边菜单，去掉了二级及三级菜单： ? 下面给出我的html代码： js实现具体的效果首先，layui的js依赖项和Jquery库引入不要忘了；然后，添加layui js使用如下代码： layui.use('element', function(){

3.4K2 0

DIV+JS+CSS实现点击弹出图片效果

前几天扒了vue vlog的官网，想给添加一个像博客一样的点击微信图标弹出公众号二维码。...FFFFFF; z-index: 1002; /* 数字的大小指明了div的相对层，数字大的在上层 */ overflow: auto; } Select Code Copy js

26.2K3 0

Js实现原生二级菜单「建议收藏」

device-width, initial-scale=1.0"> 二级菜单.../tools.js"> var spans = document.getElementsByTagName('span'); //获取span标签 var opendiv...opendiv,'fold'); menutoggle(opendiv); } opendiv = clickdiv; } } /* 定义菜单切换以及动画效果

6.7K1 0

JS实现一键点击按钮复制文本

背景描述现在有这样一个需求，想要在页面实现点击按钮，一键复制指定列表字段内容的操作，就像这样的效果复制成功之后的内容在Notepad++ 粘贴可以看到正式列表中链接地址字段的内容，那么如何实现一键点击按钮复制指定列字段内容的操作呢...，下面我们来看具体的页面代码实现。...JS代码实现首先来看页面按钮点击事件对应的方法在点击复制链接按钮时需要传入您想要复制的字段内容，这里通过 row.url 取值 copylink() 方法内容如下function copylink(...; } }这里我们用到了一个 copyText() 方法，下面来看我们这个方法的详细实现，里面每一行代码我都做了注释，方便阅读 /** * 复制文本到剪贴板 * @...总结总的来说这个基于 JavaScript 实现页面点击按钮一键复制文本的操作还是比较简单的，但是可能功能不太常用，容易遗忘。

2722 0

JS 实现点击按钮复制一段文字

经常见到网页上点击按钮，就能复制某端文字，今天来实现下。目录 1.使用input 实现 2.使用cli 0 效果图 ?...1 使用input 实现 JS 要获取某段文字最好是触发，onselect 事件，这个就能获得选中的内容。那就加个 input 。实现源码： <!...2 clipboard.min.js实现 clipboard.js是一个github上的开源项目，可以实现纯 JavaScript （无 Flash）的浏览器内容复制到系统剪贴板的功能。..."> js/clipboard.min.js"> $(document).ready(function () {...//id="target" 的文本内容是被复制的内容 var targetText = $("#target").text(); // id="copy_btn" 是点击的按钮

11K2 0

使用原生JS实现鼠标点击爱心效果！！！

使用原生JS，实现鼠标点击爱心效果！！！引言：在很多时候我们都需要实现鼠标点击出现图案或者文字这样的效果，对于用户而言，这样的体验是很极致的。其实实现起来也很简单，下面一起来学习一下吧。...这样的效果很常用，在很多网页博客中都有使用实现思路首先我们需要获取到当前鼠标点击的位置需要在当前位置生成一个标签需要给标签添加随机的自定义内容随机的文本颜色添加文本的淡出效果清除淡出的标签...文本上升效果 let i = 0 setInterval(() => { _this.style.top = this.y - 20 - i + 'px' i++ }, 10); 由于原生js...文字逐渐变淡效果 @keyframes remove { 100% { opacity: 0; } } 逐渐变淡的效果是通过css3动画来实现的很简单，动画是通过js来给元素绑定的...鼠标点击实例化标签，并在点击位置生成 body.addEventListener('click', function (e) { let x = e.pageX; let y = e.pageY

4.9K3 0

按钮被点击后屏蔽点击且倒计时60S能再次被点击-JS实现和JQuery实现

正如上图所示那样-60S后还会还原、直接上代码: js.../reg.js"> //(我是分开写的--后面的代码我是导入的) var wait = 60; function time(btn) { if(wait == 0) {...1000) } } document.getElementById("codeBtn").onclick = function() { time(this); } JQuery代码实现

1.7K2 0

在FineReport中使用JS实现点击决策报表实现全屏效果

声明：本文实现的内容大部分取自“FineReport 9.0文档”，为防止原文丢失从而个人留存备份，原文链接：https://help.finereport.com/finereport9.0/doc-view...在搜索文档的过程中，有一种解决方案是通过鼠标单击报表界面实现全屏与退出全屏，高度符合我的需求，于是乎就使用这样的方法了。...在设计器中打开决策报表，右边的组件设置中选择‘body’，然后选“事件-添加事件-点击”，如下图所示： [添加事件] 随后点击铅笔的图标，将以下代码复制进去： var docElm = document.documentElement...docElm.webkitRequestFullScreen) { docElm.webkitRequestFullScreen(); } } } 对应的实现效果是这样的

3.5K3 0

【说站】JS代码实现鼠标点击爱心特效

本文编程笔记首发使用非常简单，需要在哪个页面显示就把代码放到哪个页面就行。 <script> !function(e, t, a) { func...

3.5K1 0

Fabric.js 右键菜单

---- PK创意闹新春，我正在参加「春节创意投稿大赛」，详情请看：春节创意投稿大赛本文简介 Fabric.js 默认**没提供鼠标右键事件**，只有鼠标按键点击、鼠标按键抬起、鼠标移动等事件...本文主要关注 Fabric.js 的主要 api 有： fireRightClick：允许右键点击 stopContextMenu：禁用默认右键菜单 mouse:down：鼠标点击事件如果不知道 Fabric.js...，菜单在鼠标左侧，菜单在鼠标上方，菜单在鼠标下方）；左键单击画布其他地方，隐藏菜单；实现思路：创建画布；创建 “菜单” 的DOM元素；去官网查找 “右键相关事件”；右键单击在元素上，根据鼠标离画布边缘的距离...，计算菜单要显示的位置；左键单击在画布上，隐藏菜单；实现查文档在上面的思路中，其实难点只有 “右键相关事件” 。...代码仓库原生方式实现Fabric右键菜单在Vue3中使用Fabric实现右键菜单功能

7.1K1 0

vue菜单点击下划线跟随动画

需求实现顶部菜单栏，切换时下划线跟随滑动效果 ?...实现步骤本案例基于vue实现 1. 基础布局点击切换事件及激活的菜单加粗菜单序列(点击的第index个) */ changeTitle(index) { this.active = index...最终效果完整代码关注本公众号回复【21601】获取小结案例通过新增元素div来模拟下划线，点击时计算水平方向的目的坐标，通过CSS动画实现效果。

2.4K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭