在Boostrap 4中同步多个导航栏和多个导航栏

<nav id="navbar1" class="navbar navbar-expand-lg navbar-light bg-light">
  <!-- 导航栏内容 -->
</nav>

<nav id="navbar2" class="navbar navbar-expand-lg navbar-light bg-light">
  <!-- 导航栏内容 -->
</nav>

$(document).ready(function() {
  // 监听导航栏的点击事件
  $('.navbar-toggler').click(function() {
    // 获取当前点击的导航栏的ID
    var navbarId = $(this).closest('nav').attr('id');
    
    // 遍历所有导航栏，除了当前点击的导航栏
    $('nav').not('#' + navbarId).each(function() {
      // 判断导航栏是否已展开
      if ($(this).hasClass('show')) {
        // 折叠导航栏
        $(this).collapse('hide');
      }
    });
  });
});

<nav id="navbar1" class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Logo 1</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent1" aria-controls="navbarContent1" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarContent1">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <!-- 其他导航项 -->
    </ul>
  </div>
</nav>

<nav id="navbar2" class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Logo 2</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent2" aria-controls="navbarContent2" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarContent2">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Products</a>
      </li>
      <!-- 其他导航项 -->
    </ul>
  </div>
</nav>