Question

嘿伙计们我搜索了但找不到答案。初看起来非常基本，或者可能是非常基本的:)。

我想点击a.search，它应该会打开$('#search-input')，我想点击页面上的任意位置，但$('#search-input')关闭搜索框。我的代码不起作用。当您单击a.search时，它会关闭并再次打开。

我再次尝试解除绑定和绑定，但不起作用。请帮忙:)

 searchHeader = 'closed';
 $('a.search').on('click', function(e) {
   if (searchHeader == 'closed') {
       $('.header-search').stop(true).fadeTo(100, 1);
       $searchInput.focus();
       searchHeader = 'open';
        status = '1';
        return false;
    } else {
        $('.header-search').stop(true).fadeTo(0, 1);
        $searchInput.focus();
        searchHeader = 'closed';
        status = '0';
        return false;
    }
});
$searchInput.on('blur', function() {
    $('.header-search').stop(true).fadeTo(0, 0).css("display", "none");
});

Answer 1

无需绑定和解除绑定。您只需要触发文档点击事件，然后在点击事件中就可以编写代码。

Answer 2

bindEvents: function() {
    enter code hereinternalSearch.searchInput = $('#search-input');
        var $searchInput = internalSearch.searchInput;
        $status = '';
        $('a.search').on('click', function(e) {
            if ($('.header-search').is(':hidden')) {
                $('.header-search').stop(true).fadeTo(100, 1);
                $searchInput.focus();
                $status = 'open';
            }

            $(document).on('click', function(e) {
                if ($(e.target).attr('id') != 'search-input') {
                    if ($status == 'closed' || $status == 'undefined') {
                        if ($('.header-search').is(':visible')) {
                            $searchInput.blur();
                            $('.header-search').stop(true).fadeTo(0, 0).css("display", "none");
                            $(document).off('click');
                        }
                    }
                }
                $status = 'closed';
            });

            e.preventDefault();
        })

jQuery打开，关闭模糊和点击div

2 个答案: