文章/答案/技术大牛

发布

js向上弹出二级菜单

基础概念

JavaScript 向上弹出二级菜单通常指的是在网页中通过点击某个元素（如按钮或链接），在其上方显示一个包含多个选项的子菜单。这种交互效果常用于导航栏、设置菜单等场景。

类型

悬停式：鼠标悬停在某个元素上时显示二级菜单。
点击式：用户点击某个元素后才显示二级菜单。

应用场景

网站导航：在主导航栏下方显示子分类。
设置菜单：在用户点击“设置”后展开详细选项。
下拉选择框：用于复杂的选择操作。

示例代码

以下是一个简单的点击式二级菜单的实现示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>二级菜单示例</title>
<style>
  .menu {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  .menu a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  .menu a:hover {
    background-color: #f1f1f1;
  }
  .dropdown {
    position: relative;
    display: inline-block;
  }
  .dropdown:hover .menu {
    display: block;
  }
</style>
</head>
<body>

<div class="dropdown">
  <button>点击我</button>
  <div class="menu">
    <a href="#">选项1</a>
    <a href="#">选项2</a>
    <a href="#">选项3</a>
  </div>
</div>

<script>
  document.querySelector('.dropdown button').addEventListener('click', function(event) {
    event.stopPropagation();
    const menu = this.nextElementSibling;
    if (menu.style.display === 'block') {
      menu.style.display = 'none';
    } else {
      menu.style.display = 'block';
    }
  });

  document.addEventListener('click', function() {
    const menus = document.querySelectorAll('.menu');
    menus.forEach(menu => {
      menu.style.display = 'none';
    });
  });
</script>

</body>
</html>

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

问题1：二级菜单无法正确显示或隐藏

原因：可能是由于CSS样式冲突或JavaScript事件绑定不正确导致的。

解决方法：

检查CSS选择器是否正确，并确保没有其他样式覆盖了菜单的显示状态。
确认JavaScript事件监听器是否正确绑定到目标元素上。

问题2：二级菜单在移动设备上表现不佳

原因：移动设备的触摸事件与桌面浏览器的鼠标事件有所不同。

解决方法：

使用touchstart事件代替click事件以提高响应速度。
调整菜单的位置和大小，确保其在移动设备屏幕上易于操作。

通过以上方法，可以有效解决JavaScript二级菜单在实现过程中可能遇到的常见问题。

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

有帮助

没帮助

安卓弹出菜单显示导致RecyclerView向上滚动

android、scroll、popup、android-recyclerview

我有安卓弹出菜单显示在菜单上，在RecyclerView中点击项目。有什么线索可以帮助解决吗？

浏览 30提问于2016-09-11得票数 2

1回答

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

javascript、jquery、twitter-bootstrap

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

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

回答已采纳

1回答

什么是实现多层弹出窗口与反应-本机弹出菜单的理想方式？

react-native-popup-menu

什么是实现多层弹出窗口的理想方法？我想要能够点击一个图标在屏幕上，并有一个第一级弹出菜单出现。第一级弹出菜单上的每个项目都可能在第一级弹出菜单之上打开第二级弹出菜单(具有类似的<MenuTrigger>行为)。

浏览 3提问于2020-08-27得票数 0

1回答

下拉所有图像...就快成功了。如何操作

css

然后，当你将鼠标悬停在导航和鼠标标题“修复”上时，你会看到一个二级菜单出现。有什么建议吗？

浏览 1提问于2011-01-13得票数 0

2回答

用于..的“正确”术语向上移动菜单？

menu、terminology

下拉菜单。但我们的是向上打开的--“弹出菜单”，就像“弹出菜单”中的“弹出菜单”一样，让我们一些面向商业的人感到奇怪的困惑。所以我们试着加入“垂直菜单”然后..这是一个错误..‘垂直动画菜单’..那么你怎么称呼它呢？

浏览 3提问于2010-12-15得票数 1

回答已采纳

2回答

Win32弹出菜单可以响应滚轮吗？

winapi、menu、mousewheel

假设我有一个bog标准的Win32弹出菜单，它比屏幕还高。它在顶部弹出一个向上箭头，在底部弹出一个向下箭头，这样用户就可以滚动它的项目。这样的菜单有没有可能响应鼠标滚轮滚动？滚轮事件被发送到焦点控件，该控件不是菜单，因此通常发生的情况是菜单后面的文本编辑器滚动。更新:也就是说，有没有一种方法可以让我路由滚轮事件，或者我可以发送一些消息到弹出打开的菜单，以编程方式向上或向下滚动它？

浏览 1提问于2009-10-25得票数 3

回答已采纳

1回答

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

javascript、office-ui-fabric

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

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

回答已采纳

2回答

WM_INITMENUPOPUP和弹出资源

winapi、menu、windows-mobile、rc、softkeys

通常，它有两个软键，其中一个是菜单。这个菜单中有一个弹出菜单。我想单独处理打开"Min电池级别“子菜单。打开子菜单时，我会收到WM_INITMENUPOPUP消息，我也会得到菜单的句柄(例如，主菜单是0x0A5B0B74，子菜单是0x0A5BA924 )，但是"Min电池级别“子菜单没有一个可以用来识别它的我把2作为LOWORD(lParam)，这是主菜单中"Min电池

浏览 7提问于2011-11-27得票数 1

3回答

NSButton鼠标事件

cocoa、appkit、nsevent

我试着用鼠标在按钮上显示弹出式菜单。该按钮应显示按下鼠标，并被“不按”鼠标向上，无论任何菜单项被选中。类似于公开/空间首选项面板"+“按钮，用于添加应用程序。但是在这里，弹出菜单出现在鼠标向上，而不是鼠标向下的子类NSButton和覆盖mouseDown：。弹出菜单出现在鼠标向下，我可以选择任何菜单项。但是当弹出菜单消失时，按钮就出现了。

浏览 5提问于2010-09-06得票数 3

回答已采纳

1回答

当在emacs中单击C-鼠标-1时，您会得到一个弹出的缓冲区菜单来选择打开的缓冲区。在从emacs 23切换到24后，我注意到菜单打开“类别”的速度很慢。这意味着，我会移动鼠标，比如基本面，它会被高亮显示，但是没有显示带有缓冲区列表的第二级弹出，我需要移动鼠标更多地“在基本面上”来显示列表。这不是emacs 23中的行为，当您将鼠标悬停在类别上时，第二级列表就会立即打开。有什么理由吗？还有一个可能的解决办法？

浏览 8提问于2014-01-03得票数 1

回答已采纳

1回答

WPF菜单打开方向

wpf、menu

我有以下菜单。<MenuItem Header="Sub4"/> <MenuItem Header="Menu2" />子菜单打开时是向上或向下的我更喜欢子菜单总是向上渲染，因为菜单本身就在窗口的底部。谢谢，托尼

浏览 2提问于2010-03-04得票数 2

回答已采纳

1回答

悬停时停止CSS动画

css、drop-down-menu、hover、css-animations

对于我的项目，我编写了一个纯CSS悬停菜单。当页面加载时，菜单(#drop)在向上移动之前等待几秒钟，从视图中消失。您可以通过将鼠标悬停在页面顶部的另一个元素(#hover)上来返回菜单。当您加载页面时，当您将鼠标悬停在#hover上时，#drop在完成等待后会向上移动一段时间，然后以一种不稳定的方式向下移动。有没有办法让菜单只在你不使用纯CSS悬停在#drop上的时候才弹出来？或者，否则，使用js？

浏览 10提问于2020-09-15得票数 0

回答已采纳

1回答

CSS多级下拉菜单定位

css、menu、drop-down-menu、positioning

我正在开发一个带有3级下拉菜单(主菜单和2个子程序)的网站。我正在用MODx cms和Wayfinder开发菜单创建。CSS是在某个地方选择的，修改得很好，而且可以工作，但我不明白其中的一个细节。当您查看站点的菜单时:最右边的主菜单项("links") -> Links 1.2，"Links 1.2“的第二级子菜单很好地弹出到第一级子菜单的左边(在较轻的内容体内)。第二级子

浏览 1提问于2010-11-10得票数 0

回答已采纳

2回答

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

javascript、jquery、html、css、menu

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

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

回答已采纳

3回答

Css弹出菜单

html、css

当某些菜单项悬停时，我想创建弹出菜单，我的菜单是这样的：当item2悬停时，我想在item2下方显示弹出窗口，箭头指向上方。我找到了这个例子：有谁有这样做的例子吗？或者能帮我做到这一点？

浏览 0提问于2012-10-14得票数 6

回答已采纳

4回答

当我的弹出窗口打开时，如何防止菜单栏向下移动？

cocoa、fullscreen、menubar、nspopover

我有一个应用程序与一个弹出显示在状态栏项目。问题是，当您在全屏应用程序中单击图标时，将鼠标从菜单栏移开以单击弹出窗口中的某个内容，菜单栏向上移动，弹出窗口也是如此。这很烦人。我尝试过在弹出窗口上附加一个不可见菜单，但是我无法使菜单不可见。

浏览 9提问于2016-01-21得票数 12

回答已采纳

1回答

Angular2获取在ngFor中创建的材料MdMenu的引用

angular、angular-material

我想要实现的md-列表-包含使用ngFor创建的按钮的项现在，我想在第一级元素上悬停时触发第二级菜单item.name //第2级菜单<md-class=“cq-弹出”*ngIf="item.type ===

浏览 1提问于2017-04-29得票数 2

1回答

如何在打开辅助视图时禁用背景页面滚动，而不更改正文css

javascript、html、scroll、frontend

我正在创建一个二级视图，它将在单击链接时弹出。这个二级视图中的内容是可垂直滚动和水平固定的。问题是:当滚动到二级视图的顶部/底部时，背景页面也将滚动，如果尝试向左/向右滚动，背景页面也将滚动。event.preventDefault(); }); 然而，问题是我不知道如何检测鼠标滚动是否是水平的，不能依赖于event.deltaX，因为当向上或向下滚动时

浏览 1提问于2021-02-18得票数 0

1回答

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

javascript、jquery、zurb-foundation

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

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

2回答

在android上隐藏鼠标的上下文菜单事件

javascript、mobile-browser

因此，我使用鼠标向下事件获得开始时间，鼠标向上事件获得完成时间。然而，在android设备上运行时，长触摸会触发上下文菜单弹出，这是我不希望看到的。我可以通过在上下文菜单事件上添加函数来隐藏上下文菜单，并从其中返回false。上下文菜单被阻塞而不显示。但是，鼠标向上事件也不会触发。如何阻止上下文菜单，并仍然有鼠标向上事件？

浏览 2提问于2017-03-08得票数 2

回答已采纳

点击加载更多

js向上弹出二级菜单

基础概念

相关优势

类型

应用场景

示例代码

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

问题1：二级菜单无法正确显示或隐藏

问题2：二级菜单在移动设备上表现不佳

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐