开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js竖向折叠二级下拉菜单

基础概念

竖向折叠二级下拉菜单是一种常见的网页导航设计，它允许用户通过点击主菜单项来展开或折叠其子菜单项。这种设计有助于节省页面空间，并提高用户体验。

相关优势

节省空间：折叠菜单在不使用时隐藏子菜单，使页面布局更加简洁。
提高可读性：用户只需关注当前需要的菜单项，减少了视觉干扰。
增强交互性：动态展开和折叠的效果增加了用户的参与感。

类型

手风琴式：每次只展开一个子菜单，其他子菜单自动折叠。
多级展开：允许多个子菜单同时展开，适用于复杂的导航结构。

应用场景

企业官网：展示多层次的服务和产品分类。
电商网站：分类浏览商品时提供清晰的导航路径。
管理后台：管理员操作界面，需要快速访问多个功能模块。

示例代码

以下是一个简单的JavaScript实现竖向折叠二级下拉菜单的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vertical Accordion Menu</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .menu {
            width: 200px;
        }
        .menu-item {
            border: 1px solid #ccc;
            margin-bottom: 5px;
        }
        .submenu {
            display: none;
            padding-left: 20px;
        }
        .submenu.open {
            display: block;
        }
    </style>
</head>
<body>
    <div class="menu">
        <div class="menu-item" onclick="toggleSubmenu(this)">
            Menu 1
            <div class="submenu">
                <a href="#">Submenu 1.1</a>
                <a href="#">Submenu 1.2</a>
            </div>
        </div>
        <div class="menu-item" onclick="toggleSubmenu(this)">
            Menu 2
            <div class="submenu">
                <a href="#">Submenu 2.1</a>
                <a href="#">Submenu 2.2</a>
            </div>
        </div>
    </div>

    <script>
        function toggleSubmenu(menuItem) {
            const submenu = menuItem.querySelector('.submenu');
            submenu.classList.toggle('open');
        }
    </script>
</body>
</html>

遇到的问题及解决方法

问题1：子菜单展开后无法折叠

原因：可能是JavaScript代码中切换类名的逻辑有问题。

解决方法：确保toggleSubmenu函数正确地切换了.open类。

function toggleSubmenu(menuItem) {
    const submenu = menuItem.querySelector('.submenu');
    submenu.classList.toggle('open');
}

问题2：点击子菜单项时，子菜单自动折叠

原因：点击事件冒泡导致父元素的事件也被触发。

解决方法：在子菜单项上阻止事件冒泡。

<div class="submenu">
    <a href="#" onclick="event.stopPropagation()">Submenu 1.1</a>
    <a href="#" onclick="event.stopPropagation()">Submenu 1.2</a>
</div>

通过以上方法，可以有效实现和管理竖向折叠二级下拉菜单的功能。

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

有帮助

没帮助

相关·内容

js实现文字竖向滚动

/js/vue.js"> js/jquery-1.11.1.min.js"> (function (doc, win) { // 移动端适配 var...白衣扶2112弦领取247.11元现金 js

23.4K1 0

jQuery简单实现二级下拉菜单

ul> 乐遇网十月梦想 DEMO 我的作品二级菜单... 京东静态关于 CSS部分: /*二级菜单样式*/ *{ padding...-- 引入jquery --> js"> <script type="text/...'-20px'}) },function(){ $(this).find('li').siblings().hide();//滑过的兄弟隐藏 }) }) 下拉菜单原理...:滑过一级的li才让第二层的li显示,利用jq简单的抓取元素,让一级下的二级li显示就能解决,使用jq比css的思路更加明确!

4.3K4 0

Excel: 设置动态的二级下拉菜单

本文要讲述的是如何通过offset、match和counta函数，得到动态的二级下拉菜单。...A:A)-1,1) 通过函数offset产生动态的一级下拉菜单，好处是后期如果要添加新的省份名称，那么单元格名称省份的内容也会动态更新。...如果数据源输入的内容是Counter，则下拉菜单中会出现很多空白项。因此，这里通过COUNTA(Counter)，来获得对应城市的可选项个数，再通过OFFSET(参数表!...参考资料： [1] 求助动态二级下拉菜单的制作(https://club.excelhome.net/thread-1620256-1-1.html) [2] OFFSET 函数(https://support.microsoft.com...support.microsoft.com/zh-cn/office/index-%E5%87%BD%E6%95%B0-a5dcf0dd-996d-40a4-a822-b56b061328bd) [6] Excel里面如何建立二级下拉菜单

4.9K1 0

iOS支持展开折叠的弹出菜单（水平方向弹出菜单视图）

2.水平方向弹出菜单视图的应用场景： 2.1、门店商品的支持的功能：向右横向展开视图（操作：下/上架、打印、编辑、同步网络）支持再次折叠隐藏视图 ?...2.2、网店商品目前只包含下架功能：展开折叠视图：（包含上/下架商品功能） ? 竖向弹出菜单视图弹出菜单：会员模块的右上角的下拉菜单（竖向） ?...2.2、网店商品目前只包含下架功能：展开折叠视图：（包含上/下架商品功能） ?...3.2 具体实现的代码请访问文章：https://kunnan.blog.csdn.net/article/details/106406160 疑问解答，请关注公众号：iOS逆向 see also 竖向弹出菜单视图...弹出菜单：会员模块的右上角的下拉菜单（竖向）https://kunnan.blog.csdn.net/article/details/84618986 ?

2.5K1 0

js代码实现下拉菜单

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

8.3K3 0

VBA: 采用Combox控件实现二级下拉菜单功能

文章背景：在使用VBA的用户窗体(userform)时，有时会用到二级下拉菜单。比如选择院系（一级下拉菜单）后，班级（二级下拉菜单）的内容自动更新；选择省份后，该省份下面所属的市相应更新。...接下来以省市为例，进行二级下拉菜单的功能实现。

3.3K3 1

jQuery练习——下拉菜单

第一期——下拉菜单的实现 ---- 文章目录整体效果图一、HTML样式二、CSS样式三、jQuery代码总结 ---- 整体效果图实现效果：当鼠标移到不同的一级菜单，会显示相应的二级菜单，...鼠标移走，二级菜单消失。...li { list-style-type: none; } a { text-decoration: none; } 接下来使用float将竖向一级菜单变为横向，此时文字挨得非常紧...使用position: absolute；让二级菜单对于一级菜单来说绝对定位。使用left、transform设置居中对齐，设置display：none；隐藏下拉菜单。...// this表示当前元素，show显示元素 js"> // ready

27K2 0

iOS支持展开折叠的弹出菜单（水平方向弹出菜单视图）【修订版】

/** 触发折叠菜单隐藏和显示的按钮 */ @property (nonatomic,weak) UIButton *btn; /** 用于计算折叠菜单frame， */ @property...2.2、网店商品目前只包含下架功能：展开折叠视图：（包含上/下架商品功能） ?...竖向弹出菜单视图弹出菜单：会员模块的右上角的下拉菜单（竖向）https://kunnan.blog.csdn.net/article/details/84618986 ?...details/89405040 集成到cell的代码请看demo1:https://download.csdn.net/download/u011018979/20598998 see also 竖向弹出菜单视图...弹出菜单：会员模块的右上角的下拉菜单（竖向）https://kunnan.blog.csdn.net/article/details/84618986 ?

1.9K3 0

PHPCMS v9实现二级下拉菜单的方法

1、将.phpcmstemplatesdefaultcontent目录下的header.html打开，把里面

1852 0

html二级菜单:DIV+CSS制作二级菜单（横排二级下拉菜单）以及二级菜单出现错位怎么解决「建议收藏」

html二级菜单制作（横排二级下拉菜单）以及二级菜单出现错位怎么解决摘要：DIV+CSS制作二级菜单（横排二级下拉菜单）以及二级菜单出现错位怎么解决（解决办法放在代码下面） 1.先看一下最终的效果图...布局思路：通过 ul li ul li的嵌套以及使用div 、css 、a三种标签来一起实现二级菜单。具体步骤如下： 1....首先在body部分用div标签做一个盒子，在盒子内部（div内部）用“一级菜单”生成一级菜单然，但是此时所有一级菜单带式竖向排列的，每个一级菜单还需要在...3.接着在一级菜单里嵌入二级菜单即一级菜单二级菜单 4.嵌入后接下来控制二级菜单的样式，通过绝对定位使二级菜单出现在一级菜单下然后隐藏即...5.最后，当鼠标移动到一级菜单上时二级菜单这时时显示不出来的，还需要添加“ul li:hover ul{ display:block}”使二级菜单显示出来；下面的文字部分和图片部分是用两个小盒子，通过类选择器独立控制各自的样式

5.6K1 0

原生JS实现可折叠导航栏

其中内容中需要一个按钮用来控制折叠。...2; white-space:nowrap; } .cont{ width:auto; margin-left:280px; min-width: 1050px; } 折叠效果是通过触发事件后...但在代码中，并不能真的用for循环来做，那样在移动过程中js就会一直卡在循环中而不能执行其他代码，所以这里可以使用setInterval函数来做，它会每隔一段时间调用一次某个方法，格式为setInterval...为了使移动更平滑，每次调用时只移动到目标位置之间的距离的10%.实现折叠的函数代码如下： /*关闭/打开导航*/ function closeNav(nav,body,navTargetWidth){

7.4K2 0

怎样保持下拉菜单并截图？如何快速截图二级菜单？

我也是研究了半天才试出来，上次想这样截没弄好最后放弃了浏览器快捷键截图打开浏览器，点击截图下拉菜单，会发现浏览器自带截图快捷键，大部分是“Ctrl+Shift+X”。...可以将浏览器最小化，打开任意软件点击任一下拉菜单，然后按住“Ctrl+Shift+X”，会发现鼠标指针已经变成彩色，就可以截图了。...（这点可根据你的想法自己设定，只要不跟其它热键冲突，即可） 3.截图前，先按住“Shift+Alt+Ctrl”键，然后鼠标点击，显示下拉菜单。...4.下拉菜单出来以后，松手Shift，继续按住Ctrl+Alt键不放，同时再按住A键。（因为笔者设置的快捷键是“Ctrl+Alt+A”).这时鼠标指针就变成彩色，可以截图了。

2.3K2 0

js_jQuery【下拉菜单联动dom操作】

下拉菜单联动dom操作案例源码： js

14.1K3 0

【Html.js——图片折叠效果】折叠手风琴（蓝桥杯真题-1763）【合集】

介绍本次挑战需要实现图片折叠的效果，请使用 jQuery 语法完成代码。...打开环境右侧的【Web 服务】，就可以在浏览器中看到当前页面，点击图片，被折叠的图片不会展开。.../js/jquery-3.6.0.min.js"> js/index.js"> 解释： js/index.js">：引入自定义的 JavaScript 文件，包含实现手风琴功能的逻辑。 2....综上所述，HTML 负责页面结构，CSS 负责页面样式和布局，JavaScript 负责处理用户点击事件，三者协同工作，实现了一个带有响应式功能的折叠手风琴效果。测试结果

420 0

大厂密集背后，折叠屏市场“暗战”已起

8月29日，OPPO就发布了全新一代竖向折叠屏手机Find N3 Flip，以升级的竖向大外屏任意窗等自主创新，力图打造小折叠的新标杆。...从发展路径上来看，如今折叠屏手机市场已经发展成了竖向折叠屏和横向折叠屏两大阵营，其对应的创新品类也在快速增长。...日前，还有消息称，天马有望成为iPhone SE4二级供应商。从智能手机AMOLED市场份额的变化中，也能够看到国产屏厂的努力。...在产品类别上，随着折叠屏的“崛起”，智能手机行业围绕折叠屏的“暗战”已经打响。首先，各路手机厂商纷纷推出全新的折叠屏手机品类，以扩充其在折叠屏领域的影响力。...其中，小米推出的折叠屏手机MIX Fold 3，就以徕卡影像为主要卖点兼顾其他性能，试图做一款影像旗舰折叠机；OPPO发布的Find N3 Flip，则以竖向大外屏为主打，力图塑造竖向折叠屏的新标杆。

1952 0

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

device-width, initial-scale=1.0"> 二级菜单.../tools.js"> var spans = document.getElementsByTagName('span'); //获取span标签 var opendiv

6.7K1 0

JS-鼠标经过显示二级菜单

会在加完120后再执行，没想到他先执行的这个，并且弹出ullistElement，即说明他找到了subNav的ul，问题来了，当加载完成后，请你尝试把鼠标再放到二级菜单上移动一下，你没选择一个二级菜单...，他就是把这三个alert再执行一遍，然后你就会看到ul的长度又加了20，当你不停的上下晃动鼠标，二级菜单就会不停的添加。...原因：这里，通过这个代码：alert(aLi.length);原因就明显了，因为开头的aLi，获得的是body中所有的li，包括二级菜单的。...就是说你在二级菜单的每一个li上晃一下，他都会认为你是在重新执行了aLi.onmouseover这个代码，流程就再走了一遍。...} } } 　　后来我也发现了收缩不干净，总是多出外面几像素，但是我把border删掉他就收缩干净了，我不知道在js

8.2K10 0

巧用CSS3 :target 伪类制作Dropdown下拉菜单（无JS）

先上效果图正如标题所说，本文是教你如何巧用CSS3 :target 伪类制作Dropdown下拉菜单，原生HTML+CSS，无JavaScript。为了吸引各位往下看，先上实际例子，再进行剖析。...Duang~ 实际例子其实就是DeveMobile 主题的右上角那个按钮，你点一下就会有一个Dropdown下拉菜单出现，在其他区域点击返回原状。请用手机扫码查看： ?.../div> 大体上上面的HTML代码可以分为两部分，一部分是一个出发下拉动作的入口（我习惯称为“开关”）——通常是一个button（实例是将a标签替换为一个button的功能）；一部分就是触发动作的下拉菜单显示了...当你触发下拉菜单后，有时候需要做关闭（返回原状）的动作，而从具体情况（比如说如本实例触发菜单后菜单将原来的开关都掩盖了）或者用户体验上考虑，最好是除菜单区域外的整个屏幕都随便盲点就能关闭菜单。...为了让下拉菜单更显“下拉”的情况，采用CSS3的origin 定位下转换原点。注意下兼容性，所有主流浏览器均支持 :target，除了 IE8 及更早的版本，移动端的话直接用。

4K8 0

关于状态可见原则

类似的组件还有折叠面板、折叠菜单。应用下拉菜单由下拉菜单的激活方式引起的一个思考点，我们常见的下拉菜单有两种激的方式，hover 激活和 click 激活。...如果系统中同时存在不同激活方式的下拉菜单，这种尝试就更加让人烦恼了。应对的方案除了整个系统统一之外，有没有其他的方案呢？从操作前暗示的角度入手，能不能通过三角箭头的不同样式来区分呢？...侧边导航除了下拉菜单，在左侧导航菜单上也发现同样的问题，当导航菜单收起之后，『是否存在二级菜单』这个信息就丢失了。...尝试着改进后的左侧导航折叠态链接虽然文本链接有几种表达自身状态的样式（link、visited、hover、active），但由于实际场景中点击链接时可能会有几个结果：打开方式\跳转目标当前站点

2.4K3 0

layui 树形表格 treeTable使用详细指南，不能折叠解决办法

7，我遇到的坑我照着他给的教程一步步弄下来页面也显示出来了，但就是不能折叠，不管是我用折叠方法还是点那个三角图片还是设置为默认折叠，就是不管用，不能折叠，可把我给气坏了。...苦思冥想找不到问题，最后我去研究treetable.js这个文件发现其中有一段代码他给注释掉了，如下图所示：然后我把注释的这一段代码打开，哎，好了，展开折叠正常了，不知道什么原因，不知道有没有其他人遇到过.../jquery-1.12.0.min.js"> js/cookies.js">一级分类二级分类...$('#parentId').append(new Option(item.className, item.classId));//往下拉菜单里添加元素

5.2K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭