点击chatbubble控制wrapper显隐异常及JS报错问题求助

咱们来一步步搞定你遇到的这两个小问题：

1. 初始状态聊天窗口（wrapper）没隐藏的原因 #

你在HTML里给wrapper写的display='none'是错误写法——display是CSS属性，不能直接作为HTML标签的独立属性使用，浏览器根本不识别它。正确的做法是把它放到style属性里：

<div id="wrapper" style="display:none">
  <!-- 聊天窗口内容 -->
</div>

这样页面加载时wrapper就会默认隐藏了。

2. 点击chatBubble时报错的原因 #

你的JavaScript代码里有个明显的语法疏漏：调用jQuery方法时，选择器前面漏掉了$符号！jQuery的选择器必须以$开头，否则浏览器会把('#wrapper')当成普通字符串，自然找不到show()方法。另外，别忘了加上隐藏chatBubble的逻辑，满足你“点击后自身消失”的需求。

修正后的JavaScript代码：

$(document).ready(function() {
  $("#chatBubble").click(function(){
    $('#chatBubble').hide(); // 隐藏聊天气泡
    $('#wrapper').show();    // 显示聊天窗口
  })
});

完整修正后的代码示例 #

HTML部分 #

<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>

JavaScript部分 #

$(document).ready(function() {
  $("#chatBubble").click(function(){
    $('#chatBubble').hide();
    $('#wrapper').show();
  })
});

这样修改后，初始状态聊天窗口会隐藏，点击聊天气泡后，气泡消失、聊天窗口正常显示，也不会再报错啦～

内容的提问来源于stack exchange，提问作者nad