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

以下代码中的第一个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();
}

聊天框位于完全隔离的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>

最佳答案

我以某种方式使其工作。问题的根源是聊天框代码的放置（它不在正确的文件中）。

关于javascript - 无法使该Javascript查询正常工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18279573/