React折叠导航栏下拉菜单修复：改为点击触发而非自动展开

在React项目的Bootstrap导航栏中，桌面端"About Us"下拉菜单hover可正常展开，但进入移动端折叠模式后，点击导航切换按钮展开菜单时，"About Us"的下拉项会自动显示，需要改为点击"About Us"才展开。

问题根源 #

1. 下拉菜单的id与主折叠导航的id重复（均为navbarNavAltMarkup），导致Bootstrap的JS逻辑混淆
2. 未正确配置下拉组件的data-bs-toggle和data-bs-target属性
3. 桌面端hover逻辑未与移动端点击逻辑做区分

修复方案 #

1. 修改重复ID与下拉触发属性

将下拉菜单的id改为唯一值，并给触发元素配置正确的Bootstrap下拉属性，同时清理错误的属性绑定。

2. 添加桌面端hover展开的CSS

通过媒体查询，仅在桌面端保留hover展开效果，移动端保持点击触发逻辑。

修改后的完整代码 #

<div className='container-fluid navigation_bar'>
  <nav
    className='navbar navbar-expand-lg fixed-top navbar-light'
    style={{ background: 'rgb(246, 246, 246)' }}
  >
    <a className='navbar-brand' href='./'>
      <img
        src={logo1}
        alt='navbar-brand'
        style={{
          paddingLeft: '25px',
          paddingRight: '48px',
          width: '284px',
          height: '53px'
        }}
      />
    </a>
    <button
      className='navbar-toggler'
      aria-controls='navbarNavAltMarkup'
      aria-expanded='false'
      aria-label='Toggle navigation'
      data-bs-target='#navbarNavAltMarkup'
      data-bs-toggle='collapse'
      type='button'
    >
      <span className='navbar-toggler-icon'></span>
    </button>
    <div className='navbar-collapse collapse' id='navbarNavAltMarkup'>
      <div className='navbar-nav'>
        <a
          className='nav-button-dropdown nav-item nav-link active px-lg-3 px-sm-1 px-1'
          href='./'
        >
          Home <span className='sr-only'>(current)</span>
        </a>
        <a
          className='nav-button-dropdown nav-item nav-link px-lg-3 px-sm-3 px-1'
          href='./zense'
        >
          Zense Solution
        </a>
        <a
          className='nav-button-dropdown nav-item nav-link px-lg-3 px-sm-3 px-1'
          href='./enablingtechnologies'
        >
          Enabling Technologies
        </a>
        <li className='nav-item dropdown'>
          <span
            aria-expanded='false'
            className='nav-item nav-link dropdown-toggle px-lg-3 px-sm-3 px-1'
            data-bs-toggle="dropdown"
            data-bs-target="#aboutUsDropdown"
            role="button"
          >
            About Us
          </span>
          <ul className='dropdown-menu' id='aboutUsDropdown'>
            <li>
              <a
                className='nav-button-dropdown dropdown-item'
                href='./about'
              >
                About
              </a>
            </li>
            <li>
              <a
                className='nav-button-dropdown dropdown-item'
                href='./news'
              >
                News
              </a>
            </li>
            <li>
              <a
                className='nav-button-dropdown dropdown-item'
                href='./career'
              >
                Career
              </a>
            </li>
          </ul>
        </li>
        <a
          className='nav-button-dropdown nav-item nav-link px-lg-3 px-sm-3 px-1'
          href='./contact'
        >
          Contact Us
        </a>
      </div>
    </div>
  </nav>
</div>

桌面端hover效果的CSS #

/* 仅在lg断点及以上（桌面端）开启hover展开 */
@media (min-width: 992px) {
  .nav-item.dropdown:hover .dropdown-menu {
    display: block;
  }
}

关键修改说明 #

• 将下拉菜单的id从navbarNavAltMarkup改为aboutUsDropdown，避免与主折叠容器ID冲突
• 给"About Us"的触发元素添加data-bs-toggle="dropdown"和data-bs-target="#aboutUsDropdown"，让Bootstrap正确识别下拉触发逻辑
• 移除了触发元素上错误的data-bs-target="#navbarNavAltMarkup"，该属性原本属于主折叠按钮，会导致展开主导航时误触发下拉
• 通过CSS媒体查询区分桌面端与移动端的交互逻辑，保证两端体验一致

内容的提问来源于stack exchange，提问作者Sikandar Malik