navigation 相关问题

<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <meta name="generator" content=""> <title>Navigation Test</title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"> <style type="text/css"> .sidebar li .submenu{ list-style: none; margin: 0; padding: 0; padding-left: 1rem; padding-right: 1rem; } </style> <body> <nav class="sidebar card py-2 mb-4"> <ul class="nav flex-column" id="accordion"> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" data-bs-toggle="collapse" data-bs-target="#sub_menu_1" href="#">Link 2<i class="bi small bi-caret-down-fill"></i> </a> <ul id="sub_menu_1" class="submenu collapse" data-bs-parent="#accordion"> <li><a class="nav-link" href="#">Item 1</a></li> <li><a class="nav-link" href="#">Item 2</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link" data-bs-toggle="collapse" data-bs-target="#sub_menu_2" href="#">Link 3<i class="bi small bi-caret-down-fill"></i> </a> <ul id="sub_menu_2" class="submenu collapse" data-bs-parent="#accordion"> <li><a class="nav-link" href="#">Item 1</a></li> <li><a class="nav-link" href="#">Item 2</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 4</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 5</a> </li> </ul> </nav> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script> </body> </html> 我尝试了一个垂直导航的示例，其中包含单个链接和两个链接，每个链接打开一个子菜单。如果我单击链接 2，则会打开子菜单。接下来，单击另一个带有子菜单的链接（链接 3）将打开相应的子菜单。链接 2 下的子菜单自动关闭。那就完美了。我现在的问题是，如果我单击单个菜单链接（链接 1、4、5），如何关闭打开的子菜单。预期的行为是，如果单击没有子菜单的链接，任何打开的子菜单都将关闭，并且调用链接的目标。这是代码：您可以在每个顶级链接下方添加空元素，其父元素就像子菜单一样，因此自动隐藏将起作用（显然它需要有内容，空链接不起作用）： <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <meta name="generator" content=""> <title>Navigation Test</title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"> <style type="text/css"> .sidebar li .submenu { list-style: none; margin: 0; padding: 0; padding-left: 1rem; padding-right: 1rem; } </style> <body> <nav class="sidebar card py-2 mb-4"> <ul class="nav flex-column" id="accordion"> <li class="nav-item"> <a class="nav-link" href="#" data-bs-toggle="collapse" data-bs-target="#link1">Link 1</a> <span id="link1" data-bs-parent="#accordion"></span> </li> <li class="nav-item"> <a class="nav-link" data-bs-toggle="collapse" data-bs-target="#sub_menu_1" href="#">Link 2<i class="bi small bi-caret-down-fill"></i> </a> <ul id="sub_menu_1" class="submenu collapse" data-bs-parent="#accordion"> <li><a class="nav-link" href="#">Item 1</a></li> <li><a class="nav-link" href="#">Item 2</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link" data-bs-toggle="collapse" data-bs-target="#sub_menu_2" href="#">Link 3<i class="bi small bi-caret-down-fill"></i> </a> <ul id="sub_menu_2" class="submenu collapse" data-bs-parent="#accordion"> <li><a class="nav-link" href="#">Item 1</a></li> <li><a class="nav-link" href="#">Item 2</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="#" data-bs-toggle="collapse" data-bs-target="#link4">Link 4</a> <span id="link4" data-bs-parent="#accordion"></span> </li> <li class="nav-item"> <a class="nav-link" href="#" data-bs-toggle="collapse" data-bs-target="#link5">Link 5</a> <span id="link5" data-bs-parent="#accordion"></span> </li> </ul> </nav> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script> </body> </html> 或者您可以使用 JavaScript 来完成：在顶级链接上添加点击侦听器并使用 JavaScript 关闭打开的菜单： let links = document.querySelectorAll('.nav-item > .nav-link'); function close(e) { const menu = document.querySelector('.submenu.collapse.show'); if (menu) { bootstrap.Collapse.getOrCreateInstance(menu).hide(); } } links.forEach(el => el.addEventListener('click', close)); <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <meta name="generator" content=""> <title>Navigation Test</title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"> <style type="text/css"> .sidebar li .submenu { list-style: none; margin: 0; padding: 0; padding-left: 1rem; padding-right: 1rem; } </style> <body> <nav class="sidebar card py-2 mb-4"> <ul class="nav flex-column" id="accordion"> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" data-bs-toggle="collapse" data-bs-target="#sub_menu_1" href="#">Link 2<i class="bi small bi-caret-down-fill"></i> </a> <ul id="sub_menu_1" class="submenu collapse" data-bs-parent="#accordion"> <li><a class="nav-link" href="#">Item 1</a></li> <li><a class="nav-link" href="#">Item 2</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link" data-bs-toggle="collapse" data-bs-target="#sub_menu_2" href="#">Link 3<i class="bi small bi-caret-down-fill"></i> </a> <ul id="sub_menu_2" class="submenu collapse" data-bs-parent="#accordion"> <li><a class="nav-link" href="#">Item 1</a></li> <li><a class="nav-link" href="#">Item 2</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 4</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 5</a> </li> </ul> </nav> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> </body> </html>

navigation bootstrap-5

回答 1 投票 0

找不到导航对象。您的组件位于 NavigationContainer 内吗？在移动应用程序开发中

嗨，我在反应本机导航方面遇到了问题，你能帮忙吗？我有 2 页，这些都是空白的，可以登录。在空白页面中，我有一个按钮，当按下该按钮时，我想更改为空白页面以...

reactjs navigation native

回答 1 投票 0

如何在razor页面导航到另一个文件夹的页面？

我使用 ASP.NET CORE Razor Pages。我的项目的结构是名为 Pages 的头文件夹。其中有很多 razor 页面。在 /Pages 中，我有一个名为 Reader 的文件夹，其中有一个名为 AddRead 的 razor 页面...

html asp.net-core frontend navigation razor-pages

回答 1 投票 0

如何显示使用Camerax API（Android）拍摄的图像

如何在Android中显示使用CameraX拍摄的图像。我的情况：我有两个片段。在其中一个片段中，我实现了 CameraX 功能来拍摄照片并将其保存在本地。 ...

android kotlin android-fragments navigation android-camerax

回答 2 投票 0

无法从 JetpackCompose 中的另一个 NavGraph 导航到屏幕

我有该应用程序，并且那里有 2 个导航图。首先是 RootNavGraph： @可组合有趣的 RootNavGraph(navController: NavHostController) { NavHost(navController, 开始目的地 =

android kotlin navigation android-jetpack-compose android-jetpack-navigation

回答 1 投票 0

Android Jetpack 导航库（配置更改时导航状态中断）

我正在本机 Android Kotlin 应用程序上实现单活动架构，其中 CoreActivity 托管单个导航主机，用于管理应用程序的导航。我正在使用 Jetpack Navig...

android kotlin navigation jetpack

回答 1 投票 0

mutableStateListOf 在更改时不会更新它的值

我有一个待办事项应用程序，可以从视图模型读取 mutableStateListOf 数据。当添加 todoItem 时，它工作正常，删除它也工作正常，状态在我更新时得到更新...

kotlin navigation android-jetpack-compose mutablelivedata

回答 1 投票 0

脚手架主体内部的本地导航

我正在尝试在 Flutter 的脚手架体内进行本地导航。特别是，我想在按下“+”按钮时推动脚手架的新主体。重要提示：我想保留应用程序和底部...

flutter navigation scaffold

回答 1 投票 0

如何修复 Flutter iOS 应用导航栏上奇怪的后退按钮？

我有一个非常简单的屏幕，用一些简单的代码推送。当屏幕出现时，我看到这个奇怪的后退按钮图标：这是屏幕的代码：导入'包：flutter/cupertino.d...

ios flutter navigation

回答 3 投票 0

具有多个参数和定时的MAUI导航

在名为“批准”的页面上，我列出了不同的会计对象（旅行订单、费用报告等）。每个都可以被批准或拒绝。旅行订单获得批准后...

navigation parameter-passing maui

回答 1 投票 0

在 Compose 中，如何单击屏幕级别的 IconButton 来执行嵌套级别的 Composable 拥有的 ViewModel 方法？

我的应用程序的屏幕是一个Scaffold，有一个topBar（CenterAlignedTopAppBar）、一个内容（NavHost）和一个bottomBar（NavigationBar）。导航栏允许在 NavHost 内切换可组合项......

android navigation android-jetpack-compose

回答 1 投票 0

在 vim 拆分窗格之间导航的更简单方法

我在 vim 上使用 NERDTree，通常用 i 打开文件有没有一种简单的方法可以在不同的窗格之间切换？目前我使用 CTRL+W+W 从一个窗格移动到另一个窗格。

vim navigation

回答 8 投票 0

navigation 相关问题

最新问题