如何添加切换按钮以折叠引导程序中的标题答案

【问题标题】：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" alt=""></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" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" 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>

【问题讨论】：

标签： html css forms bootstrap-4 navbar

【解决方案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

【讨论】：