时间戳

首页 > 解决方案 > 如果除了可见表单之外单击页面上的任何其他位置，则关闭搜索表单

javascript - 如果除了可见表单之外单击页面上的任何其他位置，则关闭搜索表单

问题描述

单击我的搜索图标时，我想淡入我的搜索表单并添加焦点。如果在表单打开时单击了表单以外的页面上的任何位置，我想让表单淡出。这是我的代码。目前，即使单击表单，表单也会隐藏：

<form class="form-inline align-middle d-none d-md-inline-block" action="/" role="search">
    <input class="form-control" type="text" name="s" placeholder="type and tap enter" aria-label="search" value="<?php echo get_search_query(); ?>">
</form>

var searchForm = $( '.navbar form' );

// Navbar Search Toggle, hide nav menu if open
$( '.search-icon-container' ).click(function(e) {
    e.stopPropagation();
    searchForm.toggleClass( 'visible' );
    $( '.navbar form input' ).focus();
    $( '.navbar-collapse' ).removeClass( 'show' );
});

// Close search bar if anywhere else in the document is clicked other than the form
$("body:not('.navbar form')").on( 'click', function() {
    if( searchForm.hasClass( 'visible' ) ) {
        searchForm.toggleClass( 'visible' );
    }
});

标签： javascriptjquery

解决方案

您已经在所有不是 .navbar 中的表单的 body 元素上放置了一个事件侦听器。在表单内部单击仍然会冒泡到正文。取而代之的是，监听主体上的点击，然后检查点击是否在您的表单中：

$("body").on( 'click', function(e) {
        if( !$(e.target).closest('form.form-inline').length && archForm.hasClass('visible') ) {
            searchForm.toggleClass( 'visible' );
        }
    });

您还可以在表单下方但在身体的其余部分上使用全屏固定元素，并听取点击。

推荐阅读