Bootstrap 4，在导航菜单项中使用多个下拉按钮

Posted 2023-03-06

【中文标题】Bootstrap 4，在导航菜单项中使用多个下拉按钮

【英文标题】：Bootstrap 4, Using multiple dropdown buttons within nav menu items

【发布时间】：2018-04-16 13:29:23

【问题描述】：

我正在尝试找出在菜单项中包含子菜单的解决方案。我在菜单项中有 2 个下拉按钮（报告和视图），它们本身就是一个下拉项。每当我点击第一个按钮时，它会在下面显示子菜单，但是当我点击第二个下拉按钮时，它仍然会显示第一个子菜单项而不是第二个子菜单项。我尝试使用 btn-group 对每个按钮进行分组，但是当我这样做时，它会破坏按钮并且当您单击按钮时，菜单就会消失。有什么建议吗？谢谢

        <nav class="navbar navbar-expand-md Nav-colors">
        <a class="navbar-brand" href="<?php echo site_url(); ?>">
            <img src="<?php echo assetUrl('images'); ?>ups_logo.png" >
        </a>
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-text Nav-colors">Menu</span>
        </button>
        <div class="collapse navbar-collapse" id="navbarContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="labourPlanningDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Labour Planning
                    </a>
                    <div class="dropdown-menu" aria-labelledby="labourPlanningDropdown">
                        <button class="dropdown-item btn dropdown-toggle Btn-ups" type="button" id="reportsDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Reports
                        </button>
                        <div class="dropdown-menu Nav-submenu-colors" aria-labelledby="reportsDropdown">
                            <a class="dropdown-item" href="#">Supervisor Daily Snapshot</a>
                            <a class="dropdown-item" href="#">Manager Daily Snapshot</a>
                            <a class="dropdown-item" href="#">Employee Productivity</a>
                            <a class="dropdown-item" href="#">Metric Export</a>
                            <a class="dropdown-item" href="#">Facility Hours/FTE</a>
                            <a class="dropdown-item" href="#">Trend Graphs</a>
                            <a class="dropdown-item" href="#">Monthly YoY Graphs</a>
                        </div>
                        <a class="dropdown-item" href="<?php echo site_url('facilityperformance'); ?>">Facility Performance</a>
                        <a class="dropdown-item" href="<?php echo site_url('weeklyexcesshours'); ?>">Weekly Excess Hours</a>
                        <a class="dropdown-item" href="<?php echo site_url('targetmar'); ?>">Target MAR</a>
                        <a class="dropdown-item" href="<?php echo site_url('unitofmeasure'); ?>">Unit of Measure</a>
                        <a class="dropdown-item" href="<?php echo site_url('monthlyplanforecast'); ?>">Monthly Plan/Forecast</a>
                        <button class="dropdown-item btn dropdown-toggle Btn-ups" type="button" id="viewsDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Views
                        </button>
                        <div class="dropdown-menu Nav-submenu-colors" aria-labelledby="viewsDropdown">
                            <a class="dropdown-item" href="#">3 Week View</a>
                            <a class="dropdown-item" href="#">1 Month View</a>
                        </div>
                        <a class="dropdown-item" href="<?php echo site_url('manualmetricinput'); ?>">Manual Metric Input</a>
                        <a class="dropdown-item" href="<?php echo site_url('clientimport'); ?>">Client Import</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="<?php echo site_url('employeemapping'); ?>">Employee Mapping</a>
                        <a class="dropdown-item" href="<?php echo site_url('activityowners'); ?>">Activity Owners</a>
                        <a class="dropdown-item" href="<?php echo site_url('planimport'); ?>">Plan Import</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#">Forecast</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#">Supervisor</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#">Admin</a>
                </li>
            </ul>
        </div>
        <span class="navbar-text text-right">Logged in: <?php echo $ADID; ?></span>
    </nav>

【参考方案1】：

我注意到您的某些商品上有data-toggle="dropdown"，但没有data-target。如果您添加data-target，它应该会切换正确的项目。

例如你的菜单按钮有

<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-text Nav-colors">Menu</span>
</button>

它有一个data-target，因此它会打开正确的菜单，但您的子菜单切换不会。