Css 引导4导航栏折叠隐藏打开其他

我制作了一个导航栏，它在移动视图中用4个图标/按钮折叠

当我按下一个按钮时，它会完美地展开，但当我按下第二个按钮时，第一个按钮会保持展开状态。我想隐藏它，这样它只显示一个扩展区域（所以在图片中，当用户按下搜索时隐藏“inloggen”）

以下是显示我当前拥有的内容的标记：

<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark justify-content-center navigatie-balk">
    <div class="container d-flex flex-wrap">
        <!--- logo --->
        <div class="justify-content-start" id="div-logo">
            <a class="navbar-brand" href="<?php echo $this->url('home'); ?>" target="_self">
                <img src="<?= $this->basePath('img/logo.png') ?>"/>
            </a>
        </div>
        <!-- buttons/hamburger menu -->
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#button1" style="margin-top: 12px;">
                <span class="navbar-toggler-icon"></span>
            </button>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#div-zoeken" style="margin-top: 12px;">
                <span class="navbar-toggler-icon" id="zoeken-toggle"></span>
            </button>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#inloggen" style="margin-top: 12px;">
                <span class="navbar-toggler-icon" id="inloggen-toggle"></span>
            </button>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#plaatsen" style="margin-top: 12px;">
                <span class="navbar-toggler-icon" id="plaatsen-toggle"></span>
            </button>                
        <!-- Zoeken -->
        <div class="collapse navbar-collapse justify-content-center" id="div-zoeken">
            <ul class="navbar-nav">
            <li class="nav-item active">
                <form class="navbar-form" role="search">
                    <div class="input-group" style="height: 30px;">
                        <input type="text" class="form-control" placeholder="Zoeken..." style="border: none;width: 250px;">
                        <span class="input-group-btn">
                            <button type="submit" class="btn btn-light" style="border-radius: 0px 3px 3px 0px;padding:0px 5px 3px 5px;height: 30px;"><img src="<?= $this->basePath('img/magnifying-glass-6x.png') ?>" style="height: 16px;"/></button>                
                        </span>
                    </div>
                </form>
            </li>
            </ul> 
        </div>
        <!--- plaatsen en inloggen -->
        <div class="flex-column justify-content-end" id="div-plaatsen">
            <button type="button" class="btn btn-light btn-primary btn-sm" id="advertentie-plaatsen" style="height: 25px; padding:0px 10px 0px 10px;">Advertentie plaatsen</button>
            <div class="collapse navbar-collapse" id="plaatsen" style="float: left;">
                <ul class="nav navbar-nav" style="font-size: 14px;">
                    <li class="nav-item active" id="plaatsen-link">
                        <a class="nav-link"href="#"><img src="<?= $this->basePath('img/plaatsen-advertentie.png') ?>">&nbsp;&nbsp;Advertentie plaatsen<span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link"href="#"><img src="<?= $this->basePath('img/briefcase.png') ?>">&nbsp;&nbsp;Bedrijfsvermelding<span class="sr-only">(current)</span></a>
                    </li>
                </ul>    
            </div>
            <div class="collapse navbar-collapse" id="inloggen" style="float: right;">
                <ul class="nav navbar-nav" style="font-size: 14px;">
                    <li class="nav-item active">
                        <a class="nav-link" href="<?= $this->basePath('inloggen') ?>"><img src="<?= $this->basePath('img/person-2x.png') ?>">&nbsp;&nbsp;Inloggen<span class="sr-only">(current)</span></a>
                    </li>
                </ul>
            </div>
        </div>    
    </div>
</nav>

基本路径（'img/magnifing-glass-6x.png'）？>“style=“height:16px；"/>                


普拉特森广告

如果你想知道一些反对票可能来自何方：有一个垃圾答案被贴出来，引起了Meta的注意。如果你使用的图像是在垃圾发送网站，会有一些讨论。为了反驳这个论点，我在图像中模糊了你的url，因为它似乎与手头的问题无关。我不确定这有多困难，但你能调整你的代码使其在一个环境中工作吗？我试过了，但后来我意识到我错过了CSS，无法想象丢失的图像。有一个工作的演示可能有助于潜在的答案。@rene我不认为meta帖子是关于这个确切的问题。meta是关于提供贷款的垃圾邮件问题。作为一个荷兰人，我可以告诉你图片中的文字是关于寻找开放出租的房屋或将自己的房屋出租的。与贷款无关。我检查了编辑历史记录，这个问题从未包含任何与贷款有关的内容。因此我完全不知道这里发生了什么。@icecub关于这个问题的答案被删除了，这是垃圾邮件（呃，我是geen woord Frans bij）。我无法确定meta的人最终会问这个问题，这个问题只存在于现在已删除的答案中。我只是想防止附带损害。我也编辑了meta问题，以100%清楚地说明这都是关于（已删除的）答案的。Dank je wel rene