bootstrap多个下拉菜单无法按预期工作

Question

所以我试图在移动设备上有多个下拉菜单，下拉内容确实会出现，但它不会同时显示，如果我打开一个然后打开另一个它应该关闭第一个。

https://jsfiddle.net/4w2835o1/

    <div class="container">
   <div class="navbar navbar-fixed-top" role="navigation">
                <ul class="mobile-nav">
                    <li>
                        <a href="#" type="button" data-toggle="collapse" data-target=".navbar-collapse">
                            <i class="fa fa-bars" aria-hidden="true"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#" type="button"  data-toggle="collapse" data-target="#bs-example-navbar-collapse-2" aria-expanded="true">
                            <i class="fa fa-search" aria-hidden="true"></i>
                        </a>
                    </li>
                    <li>&nbsp;</li>
                    <li><a href="#"><i class="fa fa-language" aria-hidden="true"></i></a></li>
                    <li><a href="#"><i class="fa fa-heart" aria-hidden="true"></i></a></li>
                    <li><a href="#"><i class="fa fa-user" aria-hidden="true"></i></a></li>
                </ul>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="#">Jobs</a></li>
                        <li><a href="#">Career advice</a></li>
                        <li><a href="#">Career advice</a></li>
                    </ul>
                </div>
                <div class="navbar-collapse collapse" id="bs-example-navbar-collapse-2" aria-expanded="true"> 
                    <form class="navbar-form navbar-left" role="search"> <div class="form-group"> 
                        <input type="text" class="form-control" placeholder="Search"> </div> 
                        <button type="submit" class="btn btn-default">Submit</button> 
                    </form> 
                </div>
            </div>
</div>