Bootstrap 4:下拉菜单href链接不会转到href位置 [英] Bootstrap 4: Dropdown menu href link not going to href location
问题描述
项目URL:: http://www. vrtechweb.com/bootstrap-4-menu/bootstrap.html 您可以通过点击下载引导程序菜单文件进行测试"来下载我的文件
我在桌面上有bootstrap 4悬停菜单和此悬停菜单，但是当它在移动设备上打开时，会转换为可单击的菜单.一切正常.但是我想在悬停时打开悬停菜单，但是当单击该菜单时，应该转到我在锚标签上给出的url.与移动设备相同，当单击下拉图标然后打开菜单时，当我单击锚标记时，应转到url.它不起作用.
I have bootstrap 4 hover menu and this hover menu on desktop but when its open on mobile device its convert to clickable menu. Its all working. But i want to do hoverable menu open on hover but when click on that should go to url which i given on anchor tag. same as mobile device when click on dropdown icon then open menu and when i click on anchor tag should go to url. Its not working.
我创建了js小提琴，但我的代码无法在js小提琴上工作，因此我在服务器上创建了此文件，并附加了.zip文件，以便您可以测试我的文件，请给我建议如何运作
这里有些照片很容易让您可以理解我在说什么
Here is some pic so easily you can understand what i am saying
在台式机上
在移动设备上
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 -->
推荐答案
昨天我也遇到了同样的问题，要解决此问题，您需要从测试"菜单父范围中删除data-toggle ="dropdown".
I had this same problem just yesterday and to fix it you need to remove the data-toggle="dropdown" from the Testing menu parent span.
因此更改
<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>
请特别注意悬停，特别是在移动菜单上.如果您有单独的可点击插入符，那就没问题了.
Just be cautious about the hovers, especially on mobile menu. If you have a separate clickable caret then it should be fine.
这篇关于Bootstrap 4:下拉菜单href链接不会转到href位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
