javascript - 如何使输入组在完成书写后或单击任意位置时折叠？

Question

我使用 bootstrap 在外部单击导航栏元素上制作了一个折叠的导航栏，并且它有效

但是当我使用输入表单megganti navbar元素时，这不是我想要的方式 因为当我填写表单时，导航栏在完成之前会自动折叠

这是我创建的代码:http://jsfiddle.net/acile/3cbje867/

HTML 代码:

<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </a>
    <a class="navbar-brand" href="/">Application</a>
</div>
<div class="navbar-collapse collapse navbar-search">
    <ul class="navbar-nav nav menu menu-main-menu">        
<li>
<div class="input-group">
    <input id="search-input" class="form-control" type="text" placeholder="Search" tabindex="1" autocomplete="off">
    <div class="input-group-btn">           
        <button id="search-button" class="btn btn-primary" tabindex="2"><span class="glyphicon glyphicon-search"></span></button>
    </div>
</input>
</div>
</li>
    </ul>
</div>
</div>

JavaScript 代码:

$(document).click(function (event) {
    var $navsearch = $(".navbar-search");
    var _opened = $navsearch.hasClass("in");

    if (_opened === true) {
        $navsearch.collapse('hide');
    }
});

请帮帮我，我该如何解决它？

Answer 1

您需要确定是否在元素内部单击。

使用 $(e.target).closest($navsearch).length 检查点击事件是否发生在 $('.navbar-collapse.navbar-search') 内部.

Updated Example

$(document).on('click', function(e) {
    var $navsearch = $('.navbar-collapse.navbar-search');
    if(!$(e.target).closest($navsearch).length && $navsearch.is(':visible')) {
        $navsearch.collapse('hide')
    }        
})