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>二级菜单示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <ul class="menu">
        <li>
            <a href="#">菜单1</a>
            <ul class="submenu">
                <li><a href="#">子菜单1-1</a></li>
                <li><a href="#">子菜单1-2</a></li>
            </ul>
        </li>
        <li>
            <a href="#">菜单2</a>
            <ul class="submenu">
                <li><a href="#">子菜单2-1</a></li>
                <li><a href="#">子菜单2-2</a></li>
            </ul>
        </li>
    </ul>
    <script src="script.js"></script>
</body>
</html>

CSS样式

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

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

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

.submenu li {
    display: block;
}

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

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

JavaScript事件处理

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

    menuItems.forEach(item => {
        item.addEventListener('mouseenter', function() {
            const submenu = this.querySelector('.submenu');
            if (submenu) {
                submenu.style.display = 'block';
            }
        });

        item.addEventListener('mouseleave', function() {
            const submenu = this.querySelector('.submenu');
            if (submenu) {
                submenu.style.display = 'none';
            }
        });

        item.addEventListener('click', function(event) {
            const submenu = this.querySelector('.submenu');
            if (submenu) {
                event.preventDefault();
                submenu.style.display = submenu.style.display === 'block' ? 'none' : 'block';
            }
        });
    });
});

解释

HTML结构：创建了一个包含二级菜单的列表结构。
CSS样式：定义了菜单和子菜单的样式，包括显示和隐藏子菜单的样式。
JavaScript事件处理：
- 使用DOMContentLoaded事件确保DOM完全加载后再执行脚本。
- 为每个菜单项添加mouseenter和mouseleave事件，用于在鼠标悬停时显示子菜单，离开时隐藏子菜单。
- 为每个菜单项添加click事件，用于在点击时切换子菜单的显示状态。

应用场景

网站导航：常见的二级菜单用于网站导航，提供更详细的分类选项。
应用界面：在桌面或移动应用中，二级菜单可以用于提供额外的功能选项。

可能遇到的问题及解决方法

子菜单不显示：检查CSS样式是否正确应用，确保子菜单的display属性在需要时设置为block。
子菜单闪烁：可能是由于事件处理不当，确保mouseenter和mouseleave事件处理逻辑正确。
点击事件不生效：确保JavaScript代码正确加载，并且事件绑定逻辑正确。

通过以上示例和解释，你应该能够实现一个基本的二级菜单点击功能，并根据需要进行调整和扩展。

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

有帮助

没帮助

vue如何实现tab切换？

vue菜鸟请教如何实现点击酒柜出现酒柜的二级菜单冰箱的隐藏<div id="app"> <li--这里是js代码-->var vm = new Vue({ el: '#app

浏览 1847提问于2017-11-24

1回答

多级下拉菜单有切换问题。

、、

有人能帮我解决我下拉菜单中的切换问题吗？我放慢了动画的速度，只是为了观看。}).mouseleave(function () {

浏览 1提问于2014-07-14得票数 1

回答已采纳

4回答

如何在单击同一个类时只选择父元素

、

我的菜单有问题。我会让密码解释的。我要做的是让第二层的菜单切换显示时，<li class="has-children">被点击，而不是显示的第3级项目。然后让第三级项目切换显示时，第2级<li class="has-children">被点击。).click(function(e){ $(this).children('.sub-menu').slideToggle();当我

浏览 4提问于2014-09-26得票数 0

回答已采纳

1回答

如何找出哪个导航菜单是当前页面？

我正在开发的一个网站有很多菜单项，所以它们被分成了两个菜单。有一个more按钮，它使用JS显示第二个菜单(一次只显示一个)。我想要实现的是，当用户点击第二个菜单中的一个项目时，在重新加载后默认显示第二个菜单。为此，我需要知道当前页面是否在二级菜单中，但我不知道如何访问菜单项。更具体地说，我找不到我的菜单ID是什么(我想我应该使用需要菜单ID的wp_get_nav_menu_ite

浏览 4提问于2013-01-11得票数 0

回答已采纳

1回答

office中的上下文菜单问题-结构-第二次单击时的ui

、

我们正在开发Office UI Fabric JS 1.2.0。问题与具有子菜单项的上下文菜单有关。当您打开第二级菜单，然后单击菜单上的任意位置时，第一级菜单将关闭，第二级菜单将重新对齐到页面的左上角。我们在下一个版本的fabric中也找不到解决方案。

浏览 20提问于2017-07-19得票数 1

回答已采纳

1回答

如何触发javascript响应式菜单在单击时隐藏？

、

我使用下面的JS来显示和配置一个特定于响应的菜单。基本上，当一个h4被点击时，一个带有my my an #二级导航的列表就会向下滑动。我在带有页面锚点的页面上使用此菜单，因此我希望在单击其中一个菜单项时菜单变为slideUp。我该如何使用下面的代码来实现这一点呢？谢谢你的帮助。

浏览 3提问于2013-04-24得票数 0

回答已采纳

1回答

如何在sb管理面板中添加二级菜单？

、、

我想在边菜单中做二级菜单，但是当我这样做时，二级菜单总是打开的。我想当我点击第一级菜单，然后第二个菜单出现。不知道问题出在哪里。/bower_components/jquery/dist/jquery.min.js"></script> <!/bower_components/bootstrap/dist/<e

浏览 0提问于2018-11-02得票数 0

回答已采纳

2回答

如何仅对每个主菜单的第二级子菜单删除边距顶？

、、、、

我使用的手风琴菜单如下：我试图删除只有第二级子菜单的margin-top。这应该适用于我的手风琴菜单的第一个二级子菜单。我尝试了下面的代码，但它不起作用。注意:我使用的是外部js，它在加载时添加类。(香蕉在评论部分指出)

浏览 6提问于2015-05-22得票数 0

回答已采纳

1回答

鼠标悬停后CSS菜单消失

、、

我对我的Joomla 2.5页面上的菜单有一点小问题。它是一个模块，我使用了几个CSS属性，比如：然而，菜单不会延迟我点击它。我希望菜单看起来像什么样子的示例可以在这里找到：

浏览 0提问于2014-05-22得票数 0

3回答

在Drupal7的自定义页面上显示二级菜单

、、

我有一个自定义页面，其链接是在二级菜单页面。当用户转到自定义页面时，二级菜单将隐藏。因此，要返回二级菜单页面，用户需要首先单击主菜单，然后单击二级菜单。我想使二级菜单在该自定义页面上可见，以便用户可以直接单击二级菜单。我该怎么做呢?？

浏览 23提问于2018-02-23得票数 0

4回答

菜单中的第二级

、

我创建了一个带有项目的菜单，其中一个项目具有第二级。所以我创建了子链接。谢谢

浏览 0提问于2011-05-09得票数 3

回答已采纳

1回答

当鼠标离开区域时恢复到初始活动选项卡，或者使用Zurb Foundation中的JS

、、

当用户将鼠标从菜单上移开时，我希望恢复到最初活动的选项卡。我希望在鼠标离开第一级或第二级菜单区域时显示默认内容选项卡。或者，我可以让其他元素检测鼠标悬停，并使用JS命令初始标记处于活动状态。然而，我找不到任何关于JS应该说什么

浏览 1提问于2014-11-12得票数 0

1回答

多个爆米花(爆米花顶部)在启动3？

、、

我希望实现一个菜单，用户点击第一级按钮，它有一个弹出效果。然后用户单击第二级菜单，就会出现另一个弹出窗口。我试着上网查，但没有多少有用的信息。是可行的吗？模拟图片附在下面。

浏览 3提问于2015-05-19得票数 1

回答已采纳

1回答

将"current“id添加到joomla 1.7的两个不同菜单中的两个不同项目中

、、、

我有一篇关于joomla 1.7的文章(使用id=6)我有一个二级菜单，里面有3个不同的菜。问题是，我需要将“当前”id添加到主菜单的项目和二级菜单的项目中，因为这两个都是指向同一篇文章的链接，所以我必须突出显示它们。默认情况下，只有当我点击一个项目时，系统才会将当前id添加到该项目，而当我显示该项目链接的同一篇文章时，系统不会这样做。有什么帮助吗？谢谢。

浏览 0提问于2011-11-21得票数 0

2回答

通过切换触发折叠菜单

、

我有一个2级Acccordion菜单，我想在移动视图中隐藏它，并添加一个菜单文本，以便当单击它时，它首先打开第一级，如果单击父级，则打开第二级，但我不太知道如何正确执行。非常感谢。

浏览 0提问于2013-04-04得票数 0

回答已采纳

1回答

多级子菜单在点击时不关闭子菜单

、、、、

现在我正在做一个基于点击而不是悬停的多级子菜单。我在打开另一个子菜单时关闭子菜单时遇到问题。打开另一个子菜单时，必须关闭所有二级子菜单。这就是项目：。单击按钮"Productcategorieën“以显示菜单。点击"Zonnepanelen“，紧接着点击"Verlichting”。您将看到"Zonnepanelen“子菜单没有关闭。

浏览 1提问于2017-10-03得票数 0

1回答

多级菜单激活激活

、

一级菜单： <li><a id="new">a</a></li></ul> <li>b1</li>

浏览 1提问于2013-09-20得票数 0

1回答

我正在尝试更多地理解jQuery，今天我尝试使用菜单结构。目前，我的菜单有三个层次，现在我试图让‘子菜单项’隐藏，直到访问者点击第二个层次的菜单项。我的jQuery函数用于添加和删除“nav”类，它适用于第一级和第二级菜单项，但我仍在研究如何进一步扩展该函数，以考虑到第三级菜单项、第四个菜单项等。removeClass('nav-open'); $(this).addClass('nav-open

浏览 3提问于2014-03-10得票数 3

回答已采纳

1回答