logo标签列表

Bootstrap 4：下拉菜单中的 href 链接无法跳转到 href 位置

htmlcsstwitter-bootstrapbootstrap-4
10

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

我有一个Bootstrap 4悬停菜单，当在桌面上悬停时，它会显示悬停菜单，但是当在移动设备上打开时，它会转换为可点击的菜单。这一切都很正常。但是，我想让悬停菜单在悬停时打开，但是当单击菜单上的链接时，应该转到我在锚点标签中给定的URL。就像在移动设备上单击下拉图标时打开菜单，然后单击锚点标签时应该转到URL一样。但它不起作用。

我已经在jsfiddle上创建了我的代码但不起作用，所以我在我的服务器上创建了这个文件，并附上了我的.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 -->
什么具体地方出现了问题？ - Tim Gerhard
可悬停下拉菜单，也可点击。悬停效果正常，下拉菜单也正常，但悬停内容应该跳转到href位置，这一点目前无法实现。 - Inderjeet
5个回答
14

我昨天也遇到了同样的问题，要解决它，你需要从"Testing"菜单的父级span中删除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>

对于悬停动作要小心，尤其是在移动菜单中。如果您有一个单独的可点击的小三角，则应该没问题。

谢谢答复。如果我删除 data-toggle="dropdown"，那么移动设备下拉菜单将无法工作，子菜单也将无法工作。 - Inderjeet
这就是我所说的要小心的意思。在移动菜单上可以有一个可点击的Caret符号。你能放一个jsfiddle吗？ - mMoovs
https://jsfiddle.net/wczonukp/1/ 此链接是一个用于移动设备的代码示例，不适用于桌面。请在移动设备上查看并运行代码。 - Inderjeet
1

只需将 <a> 元素放在 <span> 元素外面即可解决问题。像这样：

<a href="https://google.com">Testing Menu</a>
<span class="dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown">
</span>

我测试过它，应该可以工作。
它已经工作了，但是子菜单上只有第一个元素无法工作。 - Inderjeet
我知道，但客户说他想用Bootstrap 4修复这个问题。有很多菜单插件可用，但客户不想要。 - Inderjeet
1
我正在使用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

我刚刚添加了一段代码片段到CodePen，而不是提供可能会过期的链接。它目前正在等待批准。 - Elikill58
1
@Elikill58 感谢您的编辑，让它看起来更好了。 - bhanuka.w
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>
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现在将保持不变且可点击。如果您已经启用了悬停下拉菜单，则已准备就绪。否则，您需要这样做，或者只有在展开下拉菜单时才使URL可点击。（参见：Bootstrap 4 - Keeping Parent of Dropdown a clickable link）

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接