我需要显示以下我能够使用以下jQuery
来实现的输入的选项html
<div class="form-field select-subject" id="valexp2_subject">
<span class="input-bkg input-bkg-select">
<input type="text" id="subject" name="subject" placeholder="Please select the subject">
</span>
<span class="textfieldRequiredMsg">Your subject is required.</span>
<div class="options">
<ul>
<li><a href="javascript:void(0);">Loremp ipsum</a></li>
<li><a href="javascript:void(0);">Dolor blah</a></li>
<li><a href="javascript:void(0);">Sit amet</a></li>
<li><a href="javascript:void(0);">Consectetur blah </a></li>
<li><a href="javascript:void(0);">Adipiscing elit</a></li>
</ul>
</div>
</div>
jQuery
$(document).ready(function() {
$('.select-subject').each(function() {
$(this).find('input').focus(function() {
$(this).parents('.select-subject').find('.options').fadeIn();
$('html').click(function() {
if ($('.options').is(':visible') {
//hide .options div
}
});
});
});
});
CSS
.options {
display: none;
}
当可见options并且用户在 <html>或 <body>中的任何地方单击时，我需要隐藏div。我尝试了多个选项，但没有通过。感谢您的帮助。
您的意思是下面的，即当您focus input IT hide options和在blur上再次visible，
失去焦点时，模糊事件将发送到元素。
当焦点事件获得焦点时，焦点事件将发送到元素。
$(document).ready(function() {
$('.select-subject').each(function() {
$(this).find('input').focus(function() {
$(this).parents('.select-subject').find('.options').fadeIn();
});
});
$('.options li').each(function() {
$(this).click(function() {
var selectValue = $(this).find('a').html();
console.log(selectValue);
$(this).parents('.select-subject').find('input').val(selectValue).focus();
$(this).parents('.select-subject').find('.options').fadeOut('fast');
});
});
$("#subject").on("focus",function(){
$(".options").hide();
});
$("#subject").on("blur",function(){
$(".options").show();
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-field select-subject" id="valexp2_subject">
<span class="input-bkg input-bkg-select">
<input type="text" id="subject" name="subject" placeholder="Please select the subject">
</span>
<span class="textfieldRequiredMsg">Your subject is required.</span>
<div class="options">
<ul>
<li><a href="javascript:void(0);">Loremp ipsum</a></li>
<li><a href="javascript:void(0);">Dolor blah</a></li>
<li><a href="javascript:void(0);">Sit amet</a></li>
<li><a href="javascript:void(0);">Consectetur blah </a></li>
<li><a href="javascript:void(0);">Adipiscing elit</a></li>
</ul>
</div>
</div>