我在打开和关闭特定搜索栏时遇到麻烦。
我需要在焦点位于字段中时打开div,而在焦点不在字段中时将其取出,但是当您单击打开的div时,无法删除或关闭该字段的焦点。
我尝试将事件放到较高的div内,但没有成功,它继续关闭。
这是我使用的代码:
$("input[name='search-input']").blur( function() {
$(".divCompleteSearch").addClass('hiddendiv');
});
$("input[name='search-input']").focus( function() {
$(".divCompleteSearch").removeClass('hiddendiv');
});
$(".button-search").on('click', function (e) {
e.preventDefault();
$("input[name='search-input']").focus();
$(".active").removeClass("active");
$(this).addClass('active');
});
HTML:
<div class="row align-content-center">
<div class="col search-bar">
<div class="col m1 icon-search-bar">
<svg viewBox="0 0 16 16" role="presentation" aria-hidden="true" focusable="false"
style="height: 22px; width: 22px; display: block; fill: currentcolor;">
<path
d="m2.5 7c0-2.5 2-4.5 4.5-4.5s4.5 2 4.5 4.5-2 4.5-4.5 4.5-4.5-2-4.5-4.5m13.1 6.9-2.8-2.9c.7-1.1 1.2-2.5 1.2-4 0-3.9-3.1-7-7-7s-7 3.1-7 7 3.1 7 7 7c1.5 0 2.9-.5 4-1.2l2.9 2.8c.2.3.5.4.9.4.3 0 .6-.1.8-.4.5-.5.5-1.2 0-1.7"></path>
</svg>
</div>
<div class="col m11 input-search-bar">
<input type="text" name="search-input" placeholder="Experimente Colegio São Fransisco">
</div>
</div>
</div>
<div class="row align-content-center divCompleteSearch hiddendiv">
<div class="col complete-search">
<div class="row">
<div class="col m3 button-search active">
Escolas
</div>
<div class="col m3 button-search">
Bairro
</div>
<div class="col m3 button-search">
Telefone
</div>
<div class="col m3 button-search">
Apelido
</div>
</div>
</div>
</div>
在第一张图片中div
是关闭的,当input search
中有焦点时,它应该打开第二张图片,div
应该保持打开状态,直到单击到任何地方为止。不在div
内。
答案 0 :(得分:2)
您需要删除blur
事件并收听页面上的所有点击。
如果您查看this fiddle,请注意,我将所有HTML包装在名为#search-container
的容器中。
然后,在Javascript中,我删除了blur()
方法,并在整个文档中添加了一个mouseup()
侦听器。
mouseup()
事件检查用户是否单击了容器或其子容器之一。如果没有,它将关闭div。
$(document).mouseup(function(e)
{
var container = $("#search-container");
// if the target of the click isn't the container nor a descendant of the container
if (!container.is(e.target) && container.has(e.target).length === 0)
{
$(".divCompleteSearch").addClass('hiddendiv');
}
});
$("input[name='search-input']").focus( function() {
$(".divCompleteSearch").removeClass('hiddendiv');
});
$(".button-search").on('click', function (e) {
e.preventDefault();
$("input[name='search-input']").focus();
$(".active").removeClass("active");
$(this).addClass('active');
});
.hiddendiv { display: none; }
#search-container {
border:1px solid #ff0000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<div id="search-container">
<div class="row align-content-center">
<div class="col search-bar">
<div class="col m1 icon-search-bar">
<svg viewBox="0 0 16 16" role="presentation" aria-hidden="true" focusable="false"
style="height: 22px; width: 22px; display: block; fill: currentcolor;">
<path
d="m2.5 7c0-2.5 2-4.5 4.5-4.5s4.5 2 4.5 4.5-2 4.5-4.5 4.5-4.5-2-4.5-4.5m13.1 6.9-2.8-2.9c.7-1.1 1.2-2.5 1.2-4 0-3.9-3.1-7-7-7s-7 3.1-7 7 3.1 7 7 7c1.5 0 2.9-.5 4-1.2l2.9 2.8c.2.3.5.4.9.4.3 0 .6-.1.8-.4.5-.5.5-1.2 0-1.7"></path>
</svg>
</div>
<div class="col m11 input-search-bar">
<input type="text" name="search-input" placeholder="Experimente Colegio São Fransisco">
</div>
</div>
</div>
<div class="row align-content-center divCompleteSearch hiddendiv">
<div class="col complete-search">
<div class="row">
<div class="col m3 button-search active">
Escolas
</div>
<div class="col m3 button-search">
Bairro
</div>
<div class="col m3 button-search">
Telefone
</div>
<div class="col m3 button-search">
Apelido
</div>
</div>
</div>
</div>