jquery - jQuery の 1 つの要素イベントが別の要素に影響を与える

Question

私が達成しようとしているのは、入力フィールドのどこかにフォーカスがある場合、1 つの 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 コードは 1 回だけ実行されます。#aイベントハンドラーが必要なようです-フォーカスを失う/獲得するたびに実行されるコード。

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