如何在完成书写后或在任何地方单击时折叠输入组？

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

Bootstrap 的导航已经内置了折叠功能，因此您不必重新编写它。您可以使用一些 jQuery:

手动隐藏搜索位

http://jsfiddle.net/1p8p0dnf/5/

$('#search-button').on('click', function() {

    // Remove collapsed class
    $('#search-nav').removeClass('in');

    // Clear search input text
    $('#search-input').val('');
});

Answer 2

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

使用$(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')
    }        
})

如何在完成书写后或在任何地方单击时折叠输入组？

how to make an input group collapsed after finishing writing or when clicked anywhere?

html

javascript

jquery

twitter-bootstrap