Bootstrap 3 折叠菜单答案

【问题标题】：Bootstrap 3 Collapse MenusBootstrap 3 折叠菜单
【发布时间】：2014-12-08 10:22:54
【问题描述】：

我一直在开发一个网站时遇到问题。我是 javascript 的初学者，很抱歉提出一个愚蠢的问题。在 www.dynamitecoffeeco.com 网站上，我在各自的容器中放置了两种不同的东西。当您单击菜单按钮，然后单击搜索按钮时，我希望一个关闭，然后另一个打开。我尝试过使用其他解决方案，但它们都是针对手风琴标记量身定制的。任何和所有的帮助将不胜感激。这里也是代码。

导航折叠是保存菜单的容器，搜索折叠是保存搜索栏。再次感谢。

<div id="nav-collapse" class="collapse">
    <div class="wrapper">
        <div class="row">
            <?php wp_nav_menu(); ?>
        </div>
    </div>
</div>
<div id="search-collapse" class="collapse">
    <div class="wrapper">
        <div class="row">
            <form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
                <label>
                    <input type="search" width="100%" class="search-field" placeholder="<?php echo esc_attr_x( 'Search …', 'placeholder' ) ?>" value="<?php echo get_search_query() ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label' ) ?>" />
                </label>
            </form>
        </div>
    </div>
</div>

【问题讨论】：

标签： javascript html twitter-bootstrap-3 collapse

【解决方案1】：

好的，我花了一些时间来理解问题，但这里就是这样。

首先，您必须将“in”类放在“默认”打开的菜单中，可能是#nav-collapse:

<div id="nav-collapse" class="collapse in">

现在在打开搜索按钮的链接中你应该写：

<a data-toggle="collapse" href="#search-collapse">

在返回导航菜单的链接中使用以下代码：

<a data-toggle="collapse" href="#nav-collapse">

这假设您已正确加载 jquery/bootstrap.js/bootstrap.css

【讨论】：