根据 NavBar 隐藏元素？
发布于2024-11-25 14:08
阅读(1088)
评论(0)
点赞(29)
收藏(1)
有没有一种方法可以根据引导 NavBar 选择隐藏/显示元素，而无需额外的 JS 或 jQuery？
我有一个导航栏，上面有 ("T1", "T2", "T3")。页面有三个表 (T1、T2、T3)。当在导航栏中按下“T1”时，我想隐藏 T2 和 T3，等等。
解决方案
有没有一种方法可以根据引导 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 显示和隐藏内容的示例，但如果不使用 JS，可能很难实现您想要的效果。
所属网站分类:
技术文章 >
问答
