如何使用HTML、CSS与Bootstrap v4实现移动端导航栏下拉菜单切换按钮功能

算力阿峰

2026-10-2

问题描述

我在桌面端导航栏中通过hover触发下拉菜单展示，为实现响应式效果，我希望在移动端屏幕的导航菜单右侧添加一个按钮，通过该按钮控制下拉菜单的展开与收起。

我想要实现的效果截图如下，即移动端下拉菜单的切换按钮效果：
移动端下拉菜单切换按钮效果截图

现有代码

CSS 代码

.nav-link {
  display: inline-block;
  position: relative;
  color: black;
}

html,body{
  height: 100%;
  width: 100%;
  font-family: 'Poppins', sans-serif;
  color: #222;
}
.navbar{
  padding: .8rem; 
}

.navbar {
  padding-right: 15px;
  padding-left: 15px;
}
.navbar .container {
  width: auto;
}

.cart {
  position: absolute;
  right: 5%;
  background-color: Transparent;
  background-repeat:no-repeat;
  border: none;
  cursor:pointer;
  overflow: hidden;
  outline:none;
}
.navbar-nav li:first-child{
  display: none;
}

@media (max-width: 768px) {    
  .navbar {
    border-radius: 4px;
    padding-right: 0;
    padding-left: 0;
  }
  .navbar-brand{
    align-items: center;
    padding-right: 10%;
  }
  .navbar-nav li:not(:first-child){
    border-bottom: 1px solid #000;
  }
  .navbar-nav li:first-child{
    display: block;
  }
  #myNavbarToggler13 {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
    width: 75%;
    height: 100%;
    background-color: #f9f9f9;
    overflow: auto;
    bottom: 0;
    max-height: inherit;
  }
  .nav-item{
    transition: 0.3s;
    padding: 5px 35px 0px;
  }
}

HTML 代码（含JS逻辑）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top" role="navigation">
<button class="navbar-toggler" type="button" data-toggle="slide-collapse" data-target="#myNavbarToggler13"
      aria-controls="myNavbarToggler13" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
  </button>
<a class="navbar-nav navbar-brand mx-auto" href="#"><img id="logo">Brand
  <button class="cart" type="button" data-toggle="slide-collapse" data-target="#cartToggler"
      aria-controls="cartToggler" aria-expanded="false" aria-label="cartToggle navigation">
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-bag-fill" viewBox="0 0 16 16">
    <path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5z"/>
  </svg>
  </button>
</a>

  <div class="collapse navbar-collapse" id="myNavbarToggler13">
      <ul class="navbar-nav mr-auto">
    <li class="nav-item">
              <a class="nav-link" id="crossButton" href="#">X</a>
          </li>
    <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="index.html" id="navbarDropdown">item 1</a>
      <div class="dropdown-menu mt-0" aria-labelledby="navbarDropdown">
        <a class="dropdown-item" href="#">subitem 1</a>
        <a class="dropdown-item" href="#">subitem 2</a>
        <a class="dropdown-item" href="#">subitem 3</a>
        <a class="dropdown-item" href="#">subitem 4</a>
        <a class="dropdown-item" href="#">subitem 5</a>
      </div>
          </li>
          <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="index.html" id="navbarDropdown">item 2</a>
      <div class="dropdown-menu mt-0" aria-labelledby="navbarDropdown">
        <a class="dropdown-item" href="#">subitem 1</a>
        <a class="dropdown-item" href="#">subitem 2</a>
        <a class="dropdown-item" href="#">subitem 3</a>
      </div>
          </li>
          <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="index.html" id="navbarDropdown">item 3</a>
      <div class="dropdown-menu mt-0" aria-labelledby="navbarDropdown">
        <a class="dropdown-item" href="#">subitem 1</a>
        <a class="dropdown-item" href="#">subitem 2</a>

      </div>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="#">About Us</a>
          </li>
      </ul>
  </div>

  <div class="collapse navbar-collapse" id="cartToggler">

  </div>
</nav>
<script>
    $(".navbar-toggler ").on('click', function() {
        $navMenuCont = $($(this).data('target'));
        $navMenuCont.animate({
            'width': 'toggle'
        }, 350);
        $(".menu-overlay").fadeIn(500);
    });
    $(".menu-overlay").click(function(event) {
        $(".navbar-toggler").trigger("click");
        $(".menu-overlay").fadeOut(500);
    });
    $("#crossButton").click(function(event) {
        $(".navbar-toggler").trigger("click");
        $(".menu-overlay").fadeOut(500);
    });
</script>

实现方案

新增CSS样式

@media (max-width: 768px) {
  /* 移动端禁用hover触发下拉 */
  .dropdown:hover .dropdown-menu {
    display: none;
  }
  /* 下拉项布局调整，给按钮留位置 */
  .nav-item.dropdown {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
  }
  /* 下拉切换按钮样式 */
  .mobile-dropdown-toggle {
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    font-size: 16px;
    cursor: pointer;
    padding: 0;
    margin-right: 10px;
  }
  /* 下拉菜单宽度撑满 */
  .dropdown-menu {
    width: 100%;
    border: none;
    background: #f9f9f9;
    margin-top: 0 !important;
    padding-left: 15px;
  }
  /* 展开状态显示菜单 */
  .dropdown-menu.show {
    display: block;
  }
}
/* 桌面端保持hover触发 */
@media (min-width: 769px) {
  .mobile-dropdown-toggle {
    display: none;
  }
  .dropdown:hover .dropdown-menu {
    display: block;
  }
}

调整HTML结构

每个下拉导航项新增右侧切换按钮，同时修正重复ID的问题，示例如下：

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="index.html" id="navbarDropdown1">item 1</a>
  <button class="mobile-dropdown-toggle">+</button>
  <div class="dropdown-menu mt-0" aria-labelledby="navbarDropdown1">
    <a class="dropdown-item" href="#">subitem 1</a>
    <a class="dropdown-item" href="#">subitem 2</a>
    <a class="dropdown-item" href="#">subitem 3</a>
    <a class="dropdown-item" href="#">subitem 4</a>
    <a class="dropdown-item" href="#">subitem 5</a>
  </div>
</li>

其余item2、item3的下拉项按同样规则修改即可。

新增JS逻辑

在原有script标签中添加以下代码：

// 禁用bootstrap默认的下拉点击事件
$('.dropdown-toggle').off('click.bs.dropdown')

// 移动端下拉菜单切换
$('.mobile-dropdown-toggle').on('click', function(e) {
  e.stopPropagation()
  const $targetMenu = $(this).next('.dropdown-menu')
  $targetMenu.toggleClass('show')
  $(this).text($targetMenu.hasClass('show') ? '-' : '+')
})

// 点击页面其他区域收起所有展开的下拉菜单
$(document).on('click', () => {
  $('.dropdown-menu.show').removeClass('show')
  $('.mobile-dropdown-toggle').text('+')
})

// 点击下拉菜单内部不触发收起
$('.dropdown-menu').on('click', e => e.stopPropagation())

修改完成后即可实现桌面端hover触发下拉，移动端点击右侧按钮切换下拉展开收起的效果。

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

如何使用HTML、CSS与Bootstrap v4实现移动端导航栏下拉菜单切换按钮功能

问题描述 #

现有代码 #

CSS 代码 #

HTML 代码（含JS逻辑） #

实现方案 #

新增CSS样式 #

调整HTML结构 #

新增JS逻辑 #