Bootstrap 4 导航下拉悬停在桌面上/单击移动设备

Question

Boostrap 4 导航栏，我删除了 data-toggle = toggle 并在桌面悬停时使用 jquery 添加了“打开”，效果很好。我现在的问题是我希望导航栏项目在某个断点“平板电脑/手机”处“点击”。我会添加一个有条件的 window.width 吗？任何帮助/方向都会很棒！

HTML：

<div class="navbar-collapse collapse main-nav-bottom--ul" id=“nav”>
<ul class="navbar-nav">
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="leigh.html" id="navbar-drop-downs"
           aria-haspopup="true" aria-expanded="false">
            <span class="underline-active"> Spotlight</span>
        </a>
        <div class="dropdown-menu dropdown-menu-nav-bottom"
             aria-labelledby="navbar-drop-downs">
            <a class="dropdown-item" href="ronstory.html">Rons Story</a>
            <a class="dropdown-item" href="disorder.html">Disorder</a>
        </div>
    </li>
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="how-to-be-vocal.html" id="navbar-drop-downs"
           aria-haspopup="true" aria-expanded="false">
            <span class="underline-active">Test</span>
        </a>
        <div class="dropdown-menu dropdown-menu-nav-bottom"
             aria-labelledby="navbar-drop-downs">
            <a class="dropdown-item" href=“test.html">Test</a>
        </div>
    </li>
</div>

查询：

<div class="navbar-collapse collapse main-nav-bottom--ul" id=“nav”>
<ul class="navbar-nav">
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="leigh.html" id="navbar-drop-downs"
           aria-haspopup="true" aria-expanded="false">
            <span class="underline-active"> Spotlight</span>
        </a>
        <div class="dropdown-menu dropdown-menu-nav-bottom"
             aria-labelledby="navbar-drop-downs">
            <a class="dropdown-item" href="ronstory.html">Rons Story</a>
            <a class="dropdown-item" href="disorder.html">Disorder</a>
        </div>
    </li>
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="how-to-be-vocal.html" id="navbar-drop-downs"
           aria-haspopup="true" aria-expanded="false">
            <span class="underline-active">Test</span>
        </a>
        <div class="dropdown-menu dropdown-menu-nav-bottom"
             aria-labelledby="navbar-drop-downs">
            <a class="dropdown-item" href=“test.html">Test</a>
        </div>
    </li>
</div>

Answer 1

首先创建导航栏希望你在那之后创建

悬停时打开子菜单

首先我们需要确定导航栏是否折叠。最简单的方法是确定窗口宽度。宽度低于768像素，它将崩溃。因此，当宽度为768或更高时，我们希望子菜单在悬停时显示，这种效果通常由单击触发。让我们将这些知识应用到 javascript 函数中。

function toggleNavbarMethod() {  
    if ($(window).width() > 768) {  
        $('.navbar .dropdown').on('mouseover', function(){  
            $('.dropdown-toggle', this).trigger('click');   
        });  
    }  
}  

当悬停父菜单项时，现在会显示子菜单。悬停不会关闭子菜单，这是我们想要的功能。这意味着我们需要为悬停事件添加一些功能。

function toggleNavbarMethod() {  
    if ($(window).width() > 768) {  
        $('.navbar .dropdown').on('mouseover', function(){  
            $('.dropdown-toggle', this).trigger('click');   
        }).on('mouseout', function(){  
            $('.dropdown-toggle', this).trigger('click').blur();  
        });  
    }  
}  

这将在悬停时再次触发点击事件。当第二次单击关闭子菜单时，我们模拟了这种行为。我们还想摆脱对父菜单项的关注。因此我添加了blur();. 但是当宽度低于 768 像素时，我们需要回退到原来的“点击打开”方法。因此，让我们移除 mouseover 和 mouseout 事件侦听器。

function toggleNavbarMethod() {  
    if ($(window).width() > 768) {  
        $('.navbar .dropdown').on('mouseover', function(){  
            $('.dropdown-toggle', this).trigger('click');   
        }).on('mouseout', function(){  
            $('.dropdown-toggle', this).trigger('click').blur();  
        });  
    }  
    else {  
        $('.navbar .dropdown').off('mouseover').off('mouseout');  
    }  
}  

导航栏功能齐全，只要导航栏未折叠，就可以在将其悬停在其父级时打开子菜单。

调整窗口大小时确定子菜单行为

但是如果用户调整他的窗口大小呢？导航栏子菜单行为需要再次确定。我们可以通过添加一个调整大小事件侦听器来做到这一点。

$(window).resize(toggleNavbarMethod);

我们需要做的最后一件事是激活脚本并绑定调整大小侦听器。

最终剧本

$(document).ready(function() {  
    function toggleNavbarMethod() {  
        if ($(window).width() > 768) {  
            $('.navbar .dropdown').on('mouseover', function(){  
                $('.dropdown-toggle', this).trigger('click');   
            }).on('mouseout', function(){  
                $('.dropdown-toggle', this).trigger('click').blur();  
            });  
        }  
        else {  
            $('.navbar .dropdown').off('mouseover').off('mouseout');  
        }  
    }  
    toggleNavbarMethod();  
    $(window).resize(toggleNavbarMethod);  
}); 

这是示例

function toggleNavbarMethod() {  
    if ($(window).width() > 768) {  
        $('.navbar .dropdown').on('mouseover', function(){  
            $('.dropdown-toggle', this).trigger('click');   
        });  
    }  
}  

function toggleNavbarMethod() {  
    if ($(window).width() > 768) {  
        $('.navbar .dropdown').on('mouseover', function(){  
            $('.dropdown-toggle', this).trigger('click');   
        }).on('mouseout', function(){  
            $('.dropdown-toggle', this).trigger('click').blur();  
        });  
    }  
}  

您可以在此处编辑或预览代码