如何实现导航栏点击垂直展开的双输入框搜索组件？

需要在导航栏中实现一个可展开的搜索框：点击初始搜索框时，垂直展开并显示第二个输入框（具有不同name属性），两个输入框上下排列。基于现有Bootstrap 5代码，可通过以下思路实现：

• 利用Bootstrap Collapse组件实现展开/收起
  Bootstrap自带的Collapse组件可轻松实现元素的显示/隐藏切换，无需额外编写大量JS。将第二个输入框放入Collapse容器中，给初始搜索框绑定点击事件触发Collapse的切换逻辑。

• 调整布局结构，实现上下排列
  将原input-group与第二个输入框放入同一外层容器，设置统一的边框、间距样式，确保展开后两个输入框垂直对齐，视觉上保持连贯。

• 自定义交互逻辑（可选）
  若需要更精细的控制（比如点击页面外部自动收起），可编写简单的JS事件监听，配合Bootstrap的Collapse API完成交互。

修改后的完整实现代码 #

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">

<nav class="navbar navbar-expand-lg py-2 fixed-top bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="">
      <h7 id="nick"><strong class="d-none d-lg-inline">myLogo</strong></h7>
    </a>
    <form class="my-auto w-75" method="get" action="">
      <div class="search-container">
        <!-- 初始搜索框组，作为展开触发区 -->
        <div class="input-group" id="searchTrigger">
          <input type="text" class="form-control border border-right-0 ui-autocomplete-input" id="search"
                 name="search" placeholder="Cerca..." autocomplete="off">
          <span class="input-group-append">
            <button class="btn btn-outline-light border border-left-0 p-3" style="border-bottom-left-radius: 0; border-top-left-radius: 0; background-color: #f18918;" type="submit">
              <i class="bi bi-search"></i> Cerca
            </button>
          </span>
        </div>
        <!-- 展开的第二个输入框，默认隐藏 -->
        <div class="collapse" id="searchCollapse">
          <input type="text" class="form-control border border-top-0" id="searchExtra"
                 name="search_extra" placeholder="Altri filtri..." autocomplete="off">
        </div>
      </div>
    </form>
    <a class="navbar-icon" data-bs-toggle="offcanvas" href="#sidebar" role="button" aria-controls="sidebar">
      <i class="bi bi-person-circle fs-4"></i>
    </a>
  </div>
</nav>

<script>
  // 初始化Collapse实例，禁止默认切换
  const collapse = new bootstrap.Collapse(document.getElementById('searchCollapse'), {
    toggle: false
  });

  // 点击初始搜索框触发展开/收起
  document.getElementById('searchTrigger').addEventListener('click', function() {
    collapse.toggle();
  });

  // 可选：点击页面外部区域收起搜索框
  document.addEventListener('click', function(e) {
    const searchContainer = document.querySelector('.search-container');
    if (!searchContainer.contains(e.target)) {
      collapse.hide();
    }
  });
</script>

<style>
  .search-container {
    width: 100%;
  }
  /* 调整展开输入框的边框样式，与第一个输入框衔接自然 */
  #searchCollapse .form-control {
    border-bottom-right-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
  }
</style>

代码关键点说明 #

• 用bootstrap.Collapse实例化展开区域，通过点击初始输入框组触发切换
• 调整第二个输入框的边框样式，与第一个输入框形成统一的视觉效果
• 添加了点击页面外部自动收起的可选逻辑
• 引入Bootstrap Icons库，修复原代码中图标显示的问题

内容的提问来源于stack exchange，提问作者Niccolò Borgioli