Bootstrap 4：下拉菜单href链接不会进入href位置
项目网址 http://www.vrtechweb.com/bootstrap-4-menu/bootstrap.html 您可以点击＆＃34下载我的文件;下载用于测试的引导程序菜单文件＆＃34;
我在桌面上有引导4悬停菜单和悬停菜单，但当它在移动设备上打开时，它会转换为可点击的菜单。一切正常。但是我想在悬停时打开可悬停的菜单，但是点击它应该转到我在锚标签上给出的url。与移动设备相同，单击下拉图标然后打开菜单，当我点击锚标签应该转到网址。它不起作用。
我已经创建了js，但是我的代码没有在js小提琴上工作，所以我在我的服务器上创建了这个文件并附加了我的.zip文件，这样你就可以测试我的文件了，请给我一些建议如何工作
这里有一些照片很容易理解我在说什么
在桌面上
HTML代码
<!-- Static navbar -->
<nav class="navbar navbar-expand-md navbar-light bg-light btco-hover-menu">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<span class="dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown">
<a href="https://google.com">Testing Menu</a>
</span>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li>
<a class="dropdown-item" href="#">Action</a>
</li>
<li>
<a class="dropdown-item" href="#">Another action</a>
</li>
<li>
<a class="dropdown-item dropdown-toggle" href="https://www.facebook.com">Submenu</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">Submenu action</a>
</li>
<li>
<a class="dropdown-item" href="#">Another submenu action</a>
</li>
<li>
<a class="dropdown-item dropdown-toggle" href="#">Subsubmenu</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">Subsubmenu action aa</a>
</li>
<li>
<a class="dropdown-item" href="#">Another subsubmenu action</a>
</li>
</ul>
</li>
<li>
<a class="dropdown-item dropdown-toggle" href="#">Second subsubmenu</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">Subsubmenu action bb</a>
</li>
<li>
<a class="dropdown-item" href="#">Another subsubmenu action</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a class="dropdown-item dropdown-toggle" href="#">Submenu 2</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">Submenu action 2</a>
</li>
<li>
<a class="dropdown-item" href="#">Another submenu action 2</a>
</li>
<li>
<a class="dropdown-item dropdown-toggle" href="#">Subsubmenu</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">Subsubmenu action 1 3</a>
</li>
<li>
<a class="dropdown-item" href="#">Another subsubmenu action 2 3</a>
</li>
</ul>
</li>
<li>
<a class="dropdown-item dropdown-toggle" href="#">Second subsubmenu 3</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">Subsubmenu action 3 </a>
</li>
<li>
<a class="dropdown-item" href="#">Another subsubmenu action 3</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<!-- Main component for a primary marketing message or call to action -->
</div>
<!-- /container -->
5 个答案:
答案 0 :(得分：6)
我昨天遇到了同样的问题，为了解决这个问题，您需要从“测试”菜单父级别中删除data-toggle =“dropdown”。
所以改变
<span class="dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown">
<a href="https://google.com">Testing Menu</a>
</span>
到
<span class="dropdown-toggle" id="navbarDropdownMenuLink">
<a href="https://google.com">Testing Menu</a>
</span>
对悬停感到谨慎，特别是在移动菜单上。如果你有一个单独的可点击插入符号，那么它应该没问题。
答案 1 :(得分：1)
只需将library(shiny)
library(ggplot2)
library(plotly)
library(dplyr)
ui <- fluidPage(
# App title ----
titlePanel(div("CROSS CORRELATION",style = "color:blue")),
# Sidebar layout with input and output definitions ----
sidebarLayout(
# Sidebar panel for inputs ----
sidebarPanel(
),
# Main panel for displaying outputs ----
mainPanel(
tabsetPanel(type = "tabs",
tabPanel("Correlation Plot",
fluidRow(
column(3, uiOutput("lx1")),
column(3,uiOutput("lx2"))),
hr(),
fluidRow(
tags$style(type="text/css",
".shiny-output-error { visibility: hidden; }",
".shiny-output-error:before { visibility: hidden; }"
)
),
fluidRow(
plotlyOutput("sc"))
)
)
)))
#server.r
server <- function(input, output) {
output$lx1<-renderUI({
selectInput("lx1", label = h4("Select 1st Expression Profile"),
choices = colnames(mtcars[,2:5]),
selected = "Lex1")
})
output$lx2<-renderUI({
selectInput("lx2", label = h4("Select 2nd Expression Profile"),
choices = colnames(mtcars[,2:5]),
selected = "Lex2")
})
# 1. create reactive values
vals <- reactiveValues()
# 2. create df to store clicks
vals$click_all <- data.frame(x = numeric(),
y = numeric(),
label = character())
# 3. add points upon plot click
observe({
# get clicked point
click_data <- event_data("plotly_click", source = "select")
# Require that click_data is available (does not return NULL)
req(click_data)
label_ <- ifelse(is.null(click_data[["key"]]),
yes = "",
no = click_data[["key"]])
# get data for current point
label_data <- data.frame(x = click_data[["x"]],
y = click_data[["y"]],
label = label_,
stringsAsFactors = FALSE)
# add current point to df of all clicks
vals$click_all <- merge(vals$click_all,
label_data,
all = TRUE)
})
output$sc<-renderPlotly({
mtcars$car <- row.names(mtcars)
p1 <- ggplot(mtcars, aes_string(x = input$lx1, y = input$lx2,key = "car",group="car"))+
# Change the point options in geom_point
geom_point(color = "darkblue") +
# Change the title of the plot (can change axis titles
# in this option as well and add subtitle)
labs(title = "Cross Correlation") +
# Change where the tick marks are
# Change how the text looks for each element
theme_bw()+
geom_smooth(aes(group = 1))+
# 4. add labels for clicked points
geom_text(data = vals$click_all,
aes(x = x, y = y, label = label),
inherit.aes = FALSE, nudge_x = 0.25)
ggplotly(p1,source = "select", tooltip = c("key")) %>%
layout(hoverlabel = list(bgcolor = "white",
font = list(family = "Calibri",
size = 9,
color = "black")))
})
}
shinyApp(ui, server)
元素放在<a>元素之外。那应该可以解决你的问题。像那样：
<span>我测试了它，它应该可以工作。
答案 2 :(得分：0)
如果下拉列表的父href替换为#，请在bootstrap navwalker中跟踪以下内容；
// If item has_children add atts to <a>.
if ( isset( $args->has_children ) && $args->has_children && 0 === $depth && $args->depth !== 1 ) {
$atts['href'] = '#;
$atts['data-toggle'] = 'dropdown';
$atts['aria-haspopup'] = 'true';
$atts['aria-expanded'] = 'false';
$atts['class'] = 'dropdown-toggle nav-link';
$atts['id'] = 'menu-item-dropdown-' . $item->ID;
} else {
(...)
}
替换
$atts['href'] = '#';
使用
$atts['href'] = ! empty( $item->url ) ? $item->url : '#';
父级网址现在将保持不变且可点击。如果您已经启用了悬停下拉菜单，则一切就绪。如果不是这样，您要么需要这样做，要么仅在下拉列表扩展时才使URL可单击。 （请参阅：Bootstrap 4 - Keeping Parent of Dropdown a clickable link）
答案 3 :(得分：0)
如果链接标记使用应删除的数据属性， 就我而言
<a class="dropdown-item" href="www.example.com" data-toggle="modal" data-
target="#logoutModal">
<i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i> Logout
</a>
我刚刚将其更改为
<a class="dropdown-item" href="www.example.com">
<i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i> Logout
</a>
答案 4 :(得分：0)
我正在使用 Bootstrap 5 并使用 <span> 标记向下拉文本添加单独的链接。这是一个对我有用的例子。我希望这个例子对你有帮助。
<li class="nav-item dropdown">
<span class="nav-link">
<a href="https://www.google.com/"
style="">Training</a>
<a class="dropdown-toggle" href="#" id="dropdown05" data-bs-toggle="dropdown"
aria-expanded="false"></a>
<ul class="dropdown-menu" aria-labelledby="dropdown05">
<li><a class="dropdown-item" href="#">Item 01</a></li>
<li><a class="dropdown-item" href="#">Item 02</a></li>
<li><a class="dropdown-item" href="#">Item 03</a></li>
<li><a class="dropdown-item" href="#">Item 04</a></li>
</ul>
</span>
</li>
下面给出了完整的例子。
.my-dropdown-link{
color: rgba(0,0,0,.55);
text-decoration:none;
}<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light" aria-label="Fifth navbar example">
<div class="container-fluid">
<a class="navbar-brand" href="#">
Test Site
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample05"
aria-controls="navbarsExample05" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample05">
<ul class="nav navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item dropdown">
<span class="nav-link">
<a class="my-dropdown-link" href="https://www.google.com/"
style="">Training</a>
<a class="dropdown-toggle my-dropdown-link" href="#" id="dropdown05" data-bs-toggle="dropdown"
aria-expanded="false"></a>
<ul class="dropdown-menu" aria-labelledby="dropdown05">
<li><a class="dropdown-item" href="#">Item 01</a></li>
<li><a class="dropdown-item" href="#">Item 02</a></li>
<li><a class="dropdown-item" href="#">Item 03</a></li>
<li><a class="dropdown-item" href="#">Item 04</a></li>
</ul>
</span>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="./contact.php">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
</body>
</html>- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？