javascript - この Javascript クエリを動作させることができません

Question

以下のコードの最初のdiv部分では、大学名が表示されます。これをクリックすると、関数がトリガーされますdisplay_people()。関数は、その大学の人々を表示/非表示にするために使用されます。これらの人々の名前は、イニシャルが に設定されているdivタグ内に含まれています。id="college_people"displaynone

これで、人の名前がクリックdisplay_chat_box()されると、その人のチャット ボックスを表示するために使用される関数がトリガーされます。

人の名前をクリックするとチャット ボックスが表示されますが、チャット ボックスを非表示にする機能はありません。ただし、人名自体は関数によって非表示または表示できますdisplay_people()。どうやら、人の名前が非表示になっている場合 (大学名をクリ​​ックすると、jQuery を使用して人名が隠されtoggle()ます)、チャット ボックスが消えてしまいますが、これは望ましくありません。

おそらく、人名をクリックするとチャットボックスが表示されるためだと思います。そして、その名前が消えると、そのonclick機能も消えるため、チャットボックスから消えます. チャットボックスをそこにとどめて、人の名前と一緒に消えないようにしたいだけです。

これを行う方法はありますか？

<div id='state_college_container' onclick='display_people()'>
  <span id='state_college_span'>
    College name
  </span>
</div>

<div id='college_people' style='display:none'>
  <div id='college_people_container' onclick='display_chat_box()'>
    <span id='college_people_span'>
      People name
    </span>
  </div>
</div>

function display_people() {
    $("#college_people").toggle();
}
function display_chat_box() {
    $(".chat_box").show();
}

チャット ボックスは、完全に分離された HTML ファイル内にクラス名の下にありますchat_box。他の要素の子孫ではありません。

チャットボックスの HTML コードは次のとおりです。

 <div class="chat_box">
    <div id="chat_box_bar">
    <span id="chat_with">Your name</span>
    <span id="close_chat" onclick="close_chat_box()">X</span>
    </div>
    <div id="previous_chat1" >
       <span> Hi, how are you?</span>         
    </div>
     <div id="textarea_container">
    <textarea onkeypress="return detectEnter(event)" id="chat_content1"  name="posted_content1"></textarea>    
    </div>
</div>