html 引导3折叠菜单

blpfk2vs  于 2022-12-02  发布在  其他
关注(0)|答案(1)|浏览(159)

我一直有一个问题,我一直在开发的网站。我是一个初学者与javascript所以抱歉提前一个愚蠢的问题。在网站www.dynamitecoffeeco.com我有两个不同的东西,每个在自己的容器。当你点击菜单按钮,然后点击搜索按钮,我希望一个关闭,然后另一个打开。我已经尝试使用其他解决方案,但他们都是定制的 accordion 标记。任何和所有的帮助将不胜感激。这里是代码以及。
导航折叠是包含菜单的容器,搜索折叠是包含搜索栏的容器。再次感谢。

<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>
5m1hhzi4

5m1hhzi41#

好吧,我花了一些时间来理解这个问题,但现在开始了。
首先你必须把类'in'放到你的'default'打开的菜单中,可能是#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

相关问题