Bootstrap 5下拉可点击的父URL

我正试图使引导5 Navabar与下拉显示悬停和家长要点击屏幕上超过992px。
我用下面的JavaScript让hover上的节目运行得很好。

document.addEventListener("DOMContentLoaded", function(){
if (window.innerWidth > 992) {
    document.querySelectorAll('.navbar .nav-item').forEach(function(everyitem){
        everyitem.addEventListener('mouseover', function(e){
            let el_link = this.querySelector('a[data-bs-toggle]');
            if(el_link != null){
                let nextEl = el_link.nextElementSibling;
                el_link.classList.add('show');
                nextEl.classList.add('show');
            }
        });
        everyitem.addEventListener('mouseleave', function(e){
            let el_link = this.querySelector('a[data-bs-toggle]');
            if(el_link != null){
                let nextEl = el_link.nextElementSibling;
                el_link.classList.remove('show');
                nextEl.classList.remove('show');
            }

        })
    });     
}
});

而且效果很好。我在让家长跟随URL时遇到问题。
使用

$('.navbar .nav-item > a').click(function() {  location.href = this.href; } });

不工作，我一直无法找到一个合适的解决方案在线。
我试过了

document.querySelectorAll('.dropdown-menu').forEach(function(element){
    element.addEventListener('click', function (e) {
      location.href = this.href;
    });
})

这也不行。
我做错了什么？
编辑.道歉这里是HTML

<ul id="main-menu" class="nav-fill w-100 fw-bold text-md-start navbar-nav">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children dropdown nav-item nav-item-1078">
    <a href="https://website.com/Parent/" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false">
        Parent
    </a>
    <ul class="dropdown-menu depth_0">
        <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-1079">
            <a href="https://website.com/sub-1/" class="dropdown-item ">
                Sub 1
            </a>
        </li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-1080">
            <a href="https://website.com/sub-2/" class="dropdown-item ">
                Sub 2
            </a>
        </li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-1081">
            <a href="https://website.com/sub-3/" class="dropdown-item ">
                Sub 3
            </a>
        </li>
    </ul>
</li>

我已经找到了如何使用下面的代码做我想做的事情。

document.addEventListener("DOMContentLoaded", function(){
if (window.innerWidth > 992) {
    document.querySelectorAll('.navbar .nav-item').forEach(function(everyitem){
        everyitem.addEventListener('mouseover', function(e){
            let el_link = this.querySelector('a[data-bs-toggle]');
            if(el_link != null){
                let nextEl = el_link.nextElementSibling;
                el_link.classList.add('show');
                nextEl.classList.add('show');
            }
        });
        everyitem.addEventListener('mouseleave', function(e){
            let el_link = this.querySelector('a[data-bs-toggle]');
            if(el_link != null){
                let nextEl = el_link.nextElementSibling;
                el_link.classList.remove('show');
                nextEl.classList.remove('show');
            }

        });
        everyitem.addEventListener('click', function(e){
            let el_link = this.querySelector('a[data-bs-toggle]');
            if(el_link != null){
                location.href = el_link.href;
            }

        });
    });
}
});

Bootstrap 5下拉可点击的父URL

1条答案

相关问题

热门标签

最新问答