Bootstrap 4 Nav-单击移动，悬停桌面，顶级导航链接所有屏幕尺寸

Question

我有一个带有dropwdowns的bootstrap 4导航栏，截至目前，我已在桌面上对其进行设置，以便在悬停时打开。顶级链接也是指向页面的链接。当我在平板电脑/手机上遇到某个断点并具有单击事件以打开下拉菜单时，是否可以禁用悬停功能？我可能会添加另一个切换开关，并根据屏幕大小显示隐藏。我试图做一个window.width <1199（我的断点）函数，该函数不起作用。

HTML

<div class="navbar-collapse collapse" id="nav">
<ul class="navbar-nav">
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href=“test.html” id="navbar-drop-downs"
           aria-haspopup="true" aria-expanded="false">
            <span class="underline-active"> Toggle One</span>
        </a>
        <div class="dropdown-menu dropdown-menu-nav-bottom"
             aria-labelledby="navbar-drop-downs">
            <a class="dropdown-item" href=“sub.html">Sub Title</a>
            <a class="dropdown-item" href=“sub-two.html">Sub Title</a>
        </div>
    </li>
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href=“test.html" id="navbar-drop-downs"
           aria-haspopup="true" aria-expanded="false">
            <span class="underline-active">Toggle 2></span>
        </a>
        <div class="dropdown-menu dropdown-menu-nav-bottom"
             aria-labelledby="navbar-drop-downs">
            <a class="dropdown-item" href=“test.html">Sub Title</a>
        </div>
    </li>
</div>

jQuery：

$(function () {

$dropDown.hover(function () {
  $(this).find($dropDownMenu).first().stop(true, true).fadeIn();
  $(this).find($dropDownToggle).addClass('dropdown-toggle--color')

}, function () {
  $(this).find($dropDownMenu).first().stop(true, true).fadeOut(100);
  $(this).find($dropDownToggle).removeClass('dropdown-toggle--color')
});

$dropDownToggle.click(function () {
  location.href = this.href;
});
});