Javascript 如果单击页面上除可见表单之外的任何其他位置,请关闭搜索表单
当我的搜索图标被点击时,我想淡入我的搜索表单并添加焦点。如果在表单打开时单击页面上除表单以外的任何位置,我希望使表单淡出。这是我的密码。当前,即使单击表单,表单也会隐藏:Javascript 如果单击页面上除可见表单之外的任何其他位置,请关闭搜索表单,javascript,jquery,Javascript,Jquery,当我的搜索图标被点击时,我想淡入我的搜索表单并添加焦点。如果在表单打开时单击页面上除表单以外的任何位置,我希望使表单淡出。这是我的密码。当前,即使单击表单,表单也会隐藏: <form class="form-inline align-middle d-none d-md-inline-block" action="/" role="search"> <input class="form-control" type="text" name="s" placeholder=
<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' );
}
});
您已经将事件侦听器放在了所有不是.navbar中的表单的主体元素上。在表单内部单击仍会冒泡到主体。相反,请倾听主体上的单击,然后检查单击是否在表单中:
$("body").on( 'click', function(e) {
if( !$(e.target).closest('form.form-inline').length && archForm.hasClass('visible') ) {
searchForm.toggleClass( 'visible' );
}
});
你也可以在你的身体下面,但在身体的其余部分使用一个全屏幕的固定元素,并聆听点击