问题
Project URL: http://www.vrtechweb.com/bootstrap-4-menu/bootstrap.html You can download my file by click on "Download bootstrap menu file for testing"
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.
I have creted js fiddle my code not working on js fiddle so i have created this file on my server and also attached my .zip file so you can test my file and please give me suggestion how would work
Here is some pic so easily you can understand what i am saying
On Desktop
on Mobile Device
HTML Code
<!-- 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 -->
回答1:
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.
So change the
<span class="dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown">
<a href="https://google.com">Testing Menu</a>
</span>
to
<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.
回答2:
Just put the <a> element outside of the <span> element. That should fix your issue. Like that:
<a href="https://google.com">Testing Menu</a>
<span class="dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown">
</span>
I tested it and it should work.
回答3:
If the the dropdowns parent href is replaced by #, track down the following in 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 {
(...)
}
Replace
$atts['href'] = '#';
with
$atts['href'] = ! empty( $item->url ) ? $item->url : '#';
The parents url will now remain untouched and clickable. If you have already enabled dropdown on hover you are all set. If not you would either need to do so, or to make the URL clickable only when the dropdown is expanded. (See: Bootstrap 4 - Keeping Parent of Dropdown a clickable link )
回答4:
if the link tag use data attributes that should be remove, in my case i have
<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>
i just changed it to
<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>
来源：https://stackoverflow.com/questions/49548895/bootstrap-4-dropdown-menu-href-link-not-going-to-href-location