javascript - 如何将元素设置为默认状态(hide ())以及单击时(show())

Question

假设我有一个左侧聊天栏，其中包含聊天用户。每个用户都有自己的图像(很像 Facebook 的聊天)，并且可以点击打开聊天框开始聊天。

这是我的代码:

$('.msg_wrap').hide();
$('.msg_box').hide();
    $('.chat_user').click(function() {          
        $('.msg_wrap').show();
        $('.msg_box').show();
} 

我知道这是错误的，但我想要做的是当页面第一次加载时，所有聊天框都被隐藏(hide())。直到我单击聊天用户(.chat_user)后，才会出现弹出/聊天框(show())。我该如何修复此代码？我必须创建一个函数吗？

Answer 1

快速思考解决方案。

首先。将元素 ('.msg_wrap') 和 ('.msg_box') 设置为隐藏在 html 中，并删除前两行代码。我不确定这些元素具体是什么，但是，例如，如果它们是 div 标签，它看起来会像这样:

<div hidden class="msg_wrap">

第二。我不确定您是否是说代码当前无法在页面加载时运行。看起来您在末尾缺少 ) ，您也可以更新为以下内容，以便它在页面加载时执行。

$(function(){
   $('.chat_user').click(function() {          
        $('.msg_wrap').show();
        $('.msg_box').show();
    }); 
});

这是 $( document ).ready() 的 jquery 简写。

此外，如果您希望 msg_wrap 和 msg_box 元素在隐藏和显示之间切换，您可以使用toggle() 方法而不是show()。