javascript - 无法使此 Javascript 查询正常工作

Question

下面代码中的第一个 div 显示一个大学名称，点击它会触发函数 display_people()。该函数用于显示/隐藏该学院的人员。这些人的名字包含在 div 标签中，id="college_people" 的初始 display 设置为 none.

现在，当一个人的名字被点击时，它会触发函数 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();
}

聊天框位于类名 chat_box 下的一个完全独立的 HTML 文件中。它不是任何其他元素的后代。

这是聊天框的 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>

Answer 1

我以某种方式让它工作。问题根源在于聊天框代码的位置(它不在正确的文件中)。