Question

我正在尝试实施响应式折叠导航栏Bootstrap 2.3.2。当窗口宽度较窄时，导航栏会折叠，并且会出现带有类btn-navbar的按钮。我想要的是能够在发生特定动作时从JavaScript手动调用此折叠功能。

我无法理解bootstrap.js窗口调整大小的位置以及调用折叠函数的方式。

以下是导航栏的代码：

<div class="navbar navbar-fixed-top" id="pantry_header">
<div class="navbar-inner">
    <div class="container">
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </a>
        <div class="logo_wrapper">
            <img src="./../public/img/logo_op.png" width="133px" height="40px">
        </div>
        <div class="nav-collapse collapse navbar-responsive-collapse">
            <ul class="nav pull-right">
                <li class="control local"><a id="link_user_experience">USER EXPERIENCE</a></li>
                <li class="control local"><a id="link_restocking">RESTOCKING EXPERIENCE</a></li>
                <li class="control local"><a id="link_analytics">ANALYTICS</a></li>
                <li class="control local"><a id="link_team" href="company">COMPANY</a></li>
                <li class="hide form_wrapper" id="header_form">
                    <div style="margin-left: 0px;"><input type="text" placeholder="Name" name="name"/></div>
                    <div><input type="text" placeholder="E-mail" name="email"/></div>
                    <div class="button_wrapper">
                        <div class="green_btn button">
                            <div class="button_text white_font">Learn More</div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>
</div>

我应该调用什么引导函数隐藏<ul>类nav，显示导航按钮，并在下拉菜单中输入导航链接？

Answer 1

使用媒体查询调用窗口大小，媒体查询检查窗口大小并调用相应的函数。

手动调用bootstrap“折叠导航栏”功能

1 个答案: