Question

我正在使用bootstrap的jquery导航栏的切碎版本。打开后，我最初无法让导航关闭，所以我补充说......

$(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

根据评论进行修改：

显示切换内容后，该按钮会被覆盖，这可以防止点击行为将其关闭。
将Object.keys()添加到z-index: 1;以将其提升到其下拉内容之上。

Working Fiddle

Answer 2

你可以用 jQuery ：

这样做

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

编辑：您应该将事件监听器放在javascript的末尾   文件。这是工作JSFiddle

只需将包装器放在navbar-collapse div中。

引导wp-nav用$（文档）关闭.on点击但不是$（'btn-class'）

2 个答案: