解决Bootstrap下拉菜单一级链接无法点击的问题

方案1：jQuery点击事件处理(推荐)

这是最简单直接的方法，通过JavaScript让父级链接可点击：

复制代码

<script>
$(document).ready(function() {
    // 方法1：简单的点击处理
    $('.dropdown-toggle').click(function(e) {
        // 如果链接有href属性且不是空链接，则跳转
        if ($(this).attr('href') && $(this).attr('href') !== '#' && !$(this).attr('href').startsWith('#')) {
            // 第一次点击打开下拉菜单，第二次点击跳转
            if ($(this).parent().hasClass('open') || $(this).attr('aria-expanded') === 'true') {
                window.location.href = $(this).attr('href');
            }
        }
    });
    
    // 方法2：更智能的处理方式
    $('.dropdown > a').on('click', function(e) {
        var $this = $(this);
        var href = $this.attr('href');
        
        // 如果有有效的href链接
        if (href && href !== '#' && !href.startsWith('#')) {
            // 如果下拉菜单已经打开，则跳转
            if ($this.parent().hasClass('show') || $this.attr('aria-expanded') === 'true') {
                window.location.href = href;
                return false;
            }
            // 如果下拉菜单没打开，先打开它
            // Bootstrap会自动处理下拉显示
        }
    });
});
</script>

方案2：分离链接和触发器

将下拉功能与链接分离，创建一个独立的触发按钮：

复制代码

<li class="nav-item dropdown">
    <a class="nav-link" href="/your-page-url">产品中心</a>
    <button class="btn btn-link dropdown-toggle dropdown-toggle-split" 
            data-bs-toggle="dropdown" 
            aria-expanded="false">
        <span class="visually-hidden">Toggle dropdown</span>
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="/product-1">产品1</a></li>
        <li><a class="dropdown-item" href="/product-2">产品2</a></li>
    </ul>
</li>

对应的CSS样式：

复制代码

.dropdown-toggle-split {
    padding: 0.375rem 0.75rem;
    margin-left: 0;
    border: none;
    background: none;
}

.nav-item {
    position: relative;
    display: flex;
    align-items: center;
}

.dropdown-toggle-split::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
}

方案3：CSS悬停方案(仅桌面端)

如果主要面向桌面用户，可以使用纯CSS悬停方案：

复制代码

/* 桌面端悬停显示下拉菜单 */
@media (min-width: 768px) {
    .navbar-nav .dropdown:hover > .dropdown-menu {
        display: block;
        margin: 0;
    }
    
    /* 移除下拉箭头的点击事件 */
    .navbar-nav .dropdown-toggle::after {
        pointer-events: none;
    }
}

/* 移动端保持点击行为 */
@media (max-width: 767px) {
    .navbar-nav .dropdown:hover > .dropdown-menu {
        display: none;
    }
}

对应的HTML结构：

复制代码

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="/your-page-url" id="navbarDropdown">
        产品中心
    </a>
    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
        <li><a class="dropdown-item" href="/product-1">产品1</a></li>
        <li><a class="dropdown-item" href="/product-2">产品2</a></li>
    </ul>
</li>

方案4：移动设备适配方案

针对不同设备提供不同的交互体验：

复制代码

<script>
$(document).ready(function() {
    function isMobile() {
        return window.innerWidth <= 768; // 可以根据需要调整断点
    }
    
    $('.dropdown-toggle').on('click', function(e) {
        var href = $(this).attr('href');
        
        // 移动端：第一次点击打开菜单，第二次点击跳转
        if (isMobile()) {
            if ($(this).parent().hasClass('show') && href && href !== '#') {
                window.location.href = href;
                return false;
            }
        } 
        // 桌面端：直接跳转
        else {
            if (href && href !== '#') {
                window.location.href = href;
                return false;
            }
        }
    });
    
    // 监听窗口大小变化
    $(window).resize(function() {
        // 重新绑定事件
        $('.dropdown-toggle').off('click').on('click', arguments.callee);
    });
});
</script>

使用建议

推荐方案1：简单有效，适用于大多数场景

分离方案2：用户体验最好，但需要调整样式

CSS方案3：仅适用于主要桌面用户的网站

适配方案4：最完善的解决方案，适合需要兼容多设备的场景

选择适合你项目需求的方案，将代码集成到你的Bootstrap项目中即可解决下拉菜单一级链接无法点击的问题。

原文

https://www.wpniu.com/jianzhan/6689.html