html - 隐藏基于 NavBar 的元素？

有没有一种方法可以根据引导 NavBar 选择隐藏/显示元素而无需额外的 JS 或 jQuery？

有点儿

您可以使用 Bootstrap 的折叠插件为您的表格模拟手风琴。折叠插件通过使用一些 CSS 类和数据属性来显示和隐藏内容。

<a data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Expand/collapse
</a>
<div id="collapseExample" class="collapse">
    Here's the content you want to expand/collapse.
</div>

您可以在可折叠内容上指定一个data-parent属性以实现类似手风琴的行为（即，一次只有一个部分可见）。Bootstrap 的文档展示了如何使用该属性创建手风琴。data-parent

我在下面整理了一个片段，看起来类似于您在问题中描述的内容。您还可以在 Codepen 上查看示例。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-light bg-light mb-4">
  <a class="navbar-brand" href="#">Site</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" id="headingOne" href="#collapseOne" role="button" data-toggle="collapse" aria-expanded="true" aria-controls="collapseOne">Table 1</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" id="headingTwo" href="#collapseTwo" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="collapseTwo">Table 2</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" id="headingThree" href="#collapseThree" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="collapseThree">Table 3</a>
      </li>
    </ul>
  </div>
</nav>

<div id="accordionExample">
  <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
    <h2>Table 1</h2>
    <table class="table">
      <thead>
        <tr>
          <th scope="col">Numbers</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
        </tr>
        <tr>
          <td>2</td>
        </tr>
        <tr>
          <th>3</th>
        </tr>
      </tbody>
    </table>
  </div>

  <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
    <h2>Table 2</h2>
    <table class="table">
      <thead>
        <tr>
          <th scope="col">More numbers</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
        </tr>
        <tr>
          <td>2</td>
        </tr>
        <tr>
          <th>3</th>
        </tr>
      </tbody>
    </table>
  </div>

  <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
    <h2>Table 3</h2>
    <table class="table">
      <thead>
        <tr>
          <th scope="col">Even more numbers</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
        </tr>
        <tr>
          <td>2</td>
        </tr>
        <tr>
          <th>3</th>
        </tr>
      </tbody>
    </table>
  </div>
</div>

警告

该行为可能不是您想要的。如果是这种情况，那么您可能不得不求助于使用 JS 来解决这个问题。在没有 JS 的情况下，肯定还有其他显示和隐藏内容的示例，但是如果没有它，可能很难实现您正在寻找的内容。

html - 隐藏基于 NavBar 的元素？

问题描述

解决方案

有点儿

警告

推荐阅读