Bootstrap 4 引导4：如何使下拉链接的头部在导航栏中可点击

我使用的是Bootstrap4，有一个带有下拉链接的菜单项。我想让菜单项的文本成为一个可点击的链接，除了可以使用下拉开关来选择其他内容之外。有什么好的解决办法吗

例如：

    <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle data-toggle="dropdown" href="/link-i-want-clickable" role="button" aria-haspopup="true" aria-expanded="false" title="List tickets filtered by custom filter preset">Link I Want Clickable </a>
          <div class="dropdown-menu dropdown-menu-wide">
            <div class="row">

                        <div class="col-md-9 text-truncate">
                            <a href="/url1" id="customFilterPreset1" class="dropdown-item" title="title1">Link 1</a>
                        </div>

                        <div class="col-md-9 text-truncate">
                            <a href="/url2" id="customFilterPreset2" class="dropdown-item" title="title2">Link 2</a>
                        </div>

            </div>
        </div>
    </li>

在鼠标悬停时进行下拉切换，而不是单击。。。为此，您需要几行JavaScript

代码片段如下：

$（文档）.ready（函数（）{
$（'.myLinkedDropdown'）.mouseenter（函数（）{
$（this.addClass（'show'））
$（this）.children（'.dropdown menu-wide'）.addClass（'show'）；
});
$（'.myLinkedDropdown'）.mouseleave（函数（）{
$（this.removeClass（'show'）；
$（this）.children（'.dropdown menu-wide'）.removeClass（'show'）；
});
});









使用数据悬停标记代替数据切换

<li class="dropdown" data-dropdown="dropdown">
    <a href="URL" class="dropdown-toggle" data-hover="dropdown">Parent</a>
    <ul class="sub-menu dropdown-menu">
        <li class="nav-item"><a class="nav-link" href="#">Child 1</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Child 2</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Child 3</a></li>
    </ul>
</li>