Question

我需要显示关注我可以使用下面的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。我尝试了多种选择，但它没有通过。谢谢你的帮助。

Answer 1

您的意思如下，即focus input 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>

html，body click事件，除了具有焦点功能的元素

1 个答案: