Question

我想要实现的目的是显示/隐藏一个div，如果输入字段在某处聚焦。显示有效，但它不会隐藏它。我是jQuery的新手

我无法弄清楚我的代码中是不是错了。

$(document).ready(function(){

if ($("#a").has(":focus")){
        $("#b").css("visibility","visible");}
    else {
        $("#b").css("visibility","hidden");}
});

HTML：

   <ul>
<li id="a" >
    <div class="label">
        <label id="company" class="description" for="company">Company</label>
    </div>
    <div class="input">
        <input id="inputcompany" name="company" class="element text medium" type="text" maxlength="255" value=""/> 
    </div> 
</li>
<li id="b" style="visibility: hidden;">
    <div class="label">
        <label class="description" for="company">Name </label>
    </div>
    <div class="input">
        <input id="company" name="company" class="element text medium" type="text" maxlength="255" value=""/> 
    </div> 
</li>

对不起伙计们，secon li应该是id“b”。

Answer 1

javascript代码只会执行一次。看起来好像你想要一个事件处理程序 - 只要#a失去/获得焦点就会执行的代码。

$('#a').focus(function() {
  $("#b").css("visibility","visible");
}).blur(function() {
   $("#b").css("visibility","hidden");
});

Answer 2

我认为如果你想在第一个hovering时显示下一个li，那么你的做法是错误的，我会这样做：

//For example on mouseover the #a
$('#a').on({
    mouseover:function() {
        $('#b').css("visibility","visible"); //we show the #b
    },
    //on mouseleave
    mouseleave: function() {
        if($('#a').find('input').val().length == 0) { //if nothing was entered in the first input
            $('#b').css("visibility","hidden"); //hide the #b
        }
    }
});

查看live example here。

希望有帮助。

Answer 3

试试这个，

$('#a input').focus(function() {
  $("#b").css("visibility","visible");
}).blur(function() {
   $("#b").css("visibility","hidden");
});

jQuery一个元素事件影响另一个

3 个答案: