Question

我有一个chatbubble点击后，我希望它消失，然后会出现一个聊天窗口。

聊天窗口是wrapper div。我在下面的html代码中设置了display = 'none'。然后在onclick的{{1}}中，我使用jQuery显示chatBubble div

所以最初我不应该看到聊天窗口。但我明白了。此外，当我点击聊天气泡时，我收到错误wrapper。我错过了什么？

Uncaught TypeError: "#wrapper".show is not a function

javascript的相关部分

<div id = "chatBubble"  class="talk-bubble tri-right btm-right round">
     <div class="talktext">
        <p>Hi, can I help?</p>
     </div>
</div>

<div id="wrapper" display = 'none'>
    <div id="menu">
        <p class="welcome">Welcome<b></b></p>
        <p class="logout"><a id="exit" href="#">Exit</a></p>
        <div style="clear:both"></div>
    </div>

   <div id="chatbox"></div>

   <form name="message" action="">
      <input name="usermsg" type="text" id="usermsg" size="63" />
      <input name="submitmsg" type="submit"  id="submitmsg" value="Send" />
  </form>
</div>

请建议。

Answer 1

您正在以错误的方式设置样式属性。您必须通过样式属性进行设置。 show()是一个jQuery函数，您在('#wrapper').show();之前就错过了导致错误。

尝试以下方法：

＆＃13;

$(document).ready(function() {
  $("#chatBubble").click(function(){
    //console.log("clicked")
    $('#wrapper').show();
  })
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "chatBubble"  class="talk-bubble tri-right btm-right round">
     <div class="talktext">
        <p>Hi, can I help?</p>
     </div>
</div>

<div id="wrapper" style='display:none'>
    <div id="menu">
        <p class="welcome">Welcome<b></b></p>
        <p class="logout"><a id="exit" href="#">Exit</a></p>
        <div style="clear:both"></div>
    </div>

   <div id="chatbox"></div>

   <form name="message" action="">
      <input name="usermsg" type="text" id="usermsg" size="63" />
      <input name="submitmsg" type="submit"  id="submitmsg" value="Send" />
  </form>
</div>

＆＃13;

根据点击其他div

1 个答案: