HTML 从Bootstrap 3导航栏的折叠中排除菜单项

在本文中，我们将介绍如何在使用Bootstrap 3导航栏时排除菜单项不参与折叠的方法。

阅读更多：HTML 教程

什么是Bootstrap 3导航栏？

Bootstrap是一种流行的前端框架，用于构建响应式和移动友好的网站。导航栏是网站的重要组成部分之一，用于提供导航链接和帮助用户浏览网站的不同部分。Bootstrap提供了一个强大的导航栏组件，其中包括一个折叠功能，当屏幕尺寸较小时，可以折叠成一个下拉菜单，以提供更好的移动用户体验。

排除菜单项的需求

有时候，我们可能希望在导航栏的折叠菜单中排除某些菜单项，例如一些不需要在移动设备上显示的链接或者需要隐藏的链接。通过排除这些菜单项，我们可以优化移动用户体验，并提供更简洁的导航菜单。

实现方法

在Bootstrap 3中，导航栏的折叠是通过CSS和JavaScript来实现的。我们可以通过修改HTML结构或使用自定义的CSS和JavaScript代码来排除具体的菜单项。

方法一：修改HTML结构

最简单的方法是直接修改导航栏的HTML结构，将不需要在折叠菜单中显示的菜单项移动到菜单区域之外。例如，我们可以将这些菜单项放在导航栏的外部，或者放在其他容器中。这样，当屏幕尺寸小到导航栏需要折叠时，这些菜单项将不包括在折叠菜单中。

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- 导航栏标题和标志 -->

    <!-- 导航栏菜单 -->
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li><a href="#">首页</a></li>
        <!-- 其他菜单项 -->
      </ul>

      <!-- 不参与折叠的菜单项 -->
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">该链接不参与折叠</a></li>
      </ul>
    </div>
  </div>
</nav>

通过将不参与折叠的菜单项放在.navbar-right类中，我们可以将其右对齐，并使其不参与折叠。

方法二：自定义CSS和JavaScript代码

如果无法修改HTML结构，我们可以借助自定义的CSS和JavaScript代码来实现排除菜单项的效果。

首先，我们需要使用CSS隐藏不需要参与折叠的菜单项。可以通过设置display: none;来隐藏这些菜单项。

<style>
  .exclude-collapse {
    display: none;
  }
</style>

然后，我们需要使用JavaScript代码来控制折叠菜单的行为。Bootstrap 3中的折叠菜单是通过jQuery来实现的，因此我们需要在我们的页面中引入jQuery。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

接下来，我们使用JavaScript代码来检测屏幕尺寸，并根据条件显示或隐藏菜单项。

<script>
  (window).on('resize', function(){
    if((window).width() < 768){
      ('.exclude-collapse').hide();
    } else {('.exclude-collapse').show();
    }
  });
</script>

这段代码将监测窗口大小的变化。当窗口宽度小于768像素（Bootstrap 3的默认折叠阈值）时，将隐藏.exclude-collapse类的菜单项；当窗口宽度大于等于768像素时，将显示这些菜单项。

示例

让我们通过一个具体的示例来演示如何排除菜单项。

假设我们有一个导航栏，其中包含“Home”、“About”、“Services”和“Contact”四个菜单项。我们希望在折叠菜单中排除“Services”菜单项。

我们可以使用方法一中的HTML结构修改方法，在<ul class="nav navbar-nav">内排除“Services”菜单项：

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- 导航栏标题和标志 -->

    <!-- 导航栏菜单 -->
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li><a href="#">首页</a></li>
        <li><a href="#">关于</a></li>
        <!-- 此处排除Services菜单项 -->
        <li class="exclude-collapse"><a href="#">服务</a></li>
        <li><a href="#">联系方式</a></li>
      </ul>

      <!-- 不参与折叠的菜单项 -->
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">该链接不参与折叠</a></li>
      </ul>
    </div>
  </div>
</nav>

或者，我们可以使用方法二中的自定义CSS和JavaScript代码的方法，隐藏“Services”菜单项：

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- 导航栏标题和标志 -->

    <!-- 导航栏菜单 -->
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li><a href="#">首页</a></li>
        <li><a href="#">关于</a></li>
        <!-- 此处添加exclude-collapse类 -->
        <li class="exclude-collapse"><a href="#">服务</a></li>
        <li><a href="#">联系方式</a></li>
      </ul>

      <!-- 不参与折叠的菜单项 -->
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">该链接不参与折叠</a></li>
      </ul>
    </div>
  </div>
</nav>

<!-- 自定义CSS和JavaScript代码 -->
<style>
  .exclude-collapse {
    display: none;
  }
</style>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
  (window).on('resize', function(){
    if((window).width() < 768){
      ('.exclude-collapse').hide();
    } else {('.exclude-collapse').show();
    }
  });
</script>