如何添加切换按钮以折叠引导程序中的标题
Posted
技术标签:
【中文标题】如何添加切换按钮以折叠引导程序中的标题【英文标题】：how to add toggler button to collapse the header in bootstrap 【发布时间】：2021-12-09 03:31:48 【问题描述】：我是 web 开发的新手，所以我发现很难在我的代码中添加折叠切换器。我尝试了不同的方法，但似乎没有得到它，请有人在这里提供帮助
这是我的代码。
<body>
<div class="container">
<header class="blog-header py-3 container">
<div class="row flex-nowrap justify-content-between align-items-center">
<div class="col-4 pt-1">
<a class="text-muted" href="#">Subscribe</a>
</div>
<div class="col-4 text-center">
<a href="#" class="navbar-brand"><img src="2611logo2.png" ></a>
</div>
<div class="col-4 d-flex justify-content-end align-items-center">
<a class="text-muted" href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke- stroke-linecap="round" stroke-linejoin="round" class="mx-3"><circle cx="10.5" cy="10.5" r="7.5"></circle><line x1="21" y1="21" x2="15.8" y2="15.8"></line></svg>
</a>
<a class="btn btn-sm btn-outline-secondary" href="#">Sign up</a>
</div>
</div>
</header>
<div class="nav-scroller py-1 mb-2">
<nav class=" nav d-flex justify-content-between">
<a class="p-2 text-muted" href="#">Shop</a>
<a class="p-2 text-muted" href="#">T-Shirts</a>
<a class="p-2 text-muted" href="#">Hoodies</a>
<a class="p-2 text-muted" href="#">Blog</a>
<a class="p-2 text-muted" href="#">Bags</a>
<a class="p-2 text-muted" href="#">Accessoriess</a>
<a class="p-2 text-muted" href="#">Tracksuit</a>
<a class="p-2 text-muted" href="#">Shoes</a>
</nav>
</div>
【问题讨论】：
【参考方案1】：试试这个（假设你正在运行 jQuery）。
$('header').toggle();
但是一旦你运行，你将无法取回它。您需要一个按钮或其他东西来用作触发器。
$("the-css-or-id-of-the-thing-you-click").click(function()
$("header").toggle();
);
参考：https://www.w3schools.com/jquery/eff_toggle.asp
【讨论】：
以上是关于如何添加切换按钮以折叠引导程序中的标题的主要内容，如果未能解决你的问题，请参考以下文章