Bootstrap 4：下拉菜单href链接不会转到href位置

Question

项目URL： http : //www.vrtechweb.com/bootstrap-4-menu/bootstrap.html 您可以通过单击“下载用于测试的引导程序菜单文件”来下载我的文件

我在桌面上有bootstrap 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 -->

Answer 1

我昨天才遇到同样的问题，要解决此问题，您需要从“测试”菜单父跨度中删除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>

只是要小心悬停，尤其是在移动菜单上。如果您有单独的可点击插入符，那应该没问题。