引导 WP-NAV 以 $(文档).on 单击但不以 $('BTN-class') 结束

Question

我正在使用Bootstrap的JQuery Navbar的切碎版本。我最初无法让NAV打开后关闭，所以我补充说...

$(document).on('click',function(e){
    $('.collapse').collapse('hide');
});

...显然，当选择任何页面元素时，我的导航很关闭，所以我将$（文档）更改为$（'。navbar-toggle'），如下所示，但是没有运气让它再次关闭。

只需单击一个按钮即可让导航关闭，我缺少什么？

        <nav class="navbar navbar-default" role="navigation">
            <div class="container row hdrMain">
                <div class="col-lg-6 col-md-4 col-sm-3 col-xs-12">
                    <div class="row verticalAlign">
                        <div class="col-sm-6 col-xs-6"></div>
                        <div class="navbar-header  col-sm-6 col-xs-6">
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#closeIT">btn</button>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-md-8 col-sm-9">
                    <div id="closeIT" class="collapse navbar-collapse">
                        <div class="row hdrIcons">
                            <ul>
                              <li>icon</li>
                              <li>icon</li>
                              <li>icon</li>
                            </ul>
                        </div>
                        <!--<?php wp nav function called here?>-->
                    </div>
                </div>
            </div>
        </nav>

<script>         
jQuery(document).ready(function($) {
    $('.navbar-toggle').on('click',function(e){
        $('.collapse').collapse('hide');
    });
</script>

Answer 1

您可以使用 jquery 这样做。

<script>
    function someFunction(){
        $('#closeIT').collapse();
    }
    $('body').on('click', '.navbar-toggle', someFunction); //event-listener
</script>

编辑：您应该将活动听众放在JavaScript的末尾 文件。这是在工作jsfiddle

只需将包装器放入Navbar-Collapse Div。

Answer 2

根据注释：

• 显示切换内容后，按钮覆盖了按钮，这是"预防"单击行为以关闭它。
• 将z-index: 1;添加到.navbar-toggle以将其提高到其下拉内容上方。

工作小提琴