我正在寻找关闭我的搜索框，当一个用户点击任何其他东西，而不是我的搜索栏。 我已经尝试了一些堆栈溢出的解决方案，但它们似乎并不适合我的实现。
<div class="search-form-wrapper">
<form action="{{ url('search/results') }}" class="search-bar" autocomplete="off">
<input id="search" itemprop="query-input" type="search" aria-label="Search" name="q" placeholder="Search for Coupons, Stores & Deals" class="browser-default">
<label for="search"><i class="material-icons">search</i></label>
</form>
</div>
下文JS
<script>
$( document ).ready(function() {
$('[data-toggle=search-form]').click(function() {
$('.search-form-wrapper').toggleClass('open');
});
$('.search-close').click(function(event) {
$('.search-form-wrapper').removeClass('open');
$('html').removeClass('search-form-open');
});
});
</script>
您也可以简单地将click事件附加到上，如下所示:
$( document ).ready(function() {
$('[data-toggle=search-form]').click(function() {
$('.search-form-wrapper').toggleClass('open');
});
$('.search-close, body').click(function(event) {
if($('.search-form-wrapper').hasClass('open')) {
$('.search-form-wrapper').removeClass('open');
$('html').removeClass('search-form-open');
}
});
});
