Bootstrap 4：下拉菜单 href 链接不会指向 href 位置

Question

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

我在桌面上有 bootstrap 4 悬停菜单和这个悬停菜单，但是当它在移动设备上打开时，它会转换为可点击的菜单。一切正常。但是我想在悬停时打开可悬停的菜单，但是当单击它时应该转到我在锚标记上给出的 url。当点击下拉图标然后打开菜单时与移动设备相同，当我点击锚标记时应该转到 url。它不工作。

我创建了 js fiddle 我的代码不能在 js fiddle 上工作所以我在我的服务器上创建了这个文件并附加了我的 .zip 文件所以你可以测试我的文件并请给我建议如何工作

这是一些图片，你很容易就能理解我在说什么

在桌面上

在移动设备上

网页代码

    <!-- 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 -->

原文由 Inderjeet 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

请注意悬停，尤其是在移动菜单上。如果您有一个单独的可点击插入符号，那么它应该没问题。

原文由 mMoovs 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我使用的是 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>

片段来自： https ://codepen.io/bhanuka94/pen/poPVwrG

原文由 bhanuka.w 发布，翻译遵循 CC BY-SA 4.0 许可协议