Question

我试图找出在菜单项中有子菜单的解决方案。我在菜单项中有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" alt="Brand Logo">
        </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>

Answer 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因此它会打开正确的菜单，但子菜单切换不会。

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

1 个答案: