如何设置emoji选择器弹窗默认隐藏 仅点击按钮时打开

默认展开的问题由3个细节错误导致：

• 初始HTML代码里，触发弹窗的按钮.emoji-btn默认就携带了open激活类，页面加载时直接处于激活状态
• HTML里的注释标签未闭合，会打乱后续DOM结构解析
• CSS缺少按钮定位基准、open状态关联弹窗的显隐样式，JS未提前获取DOM元素会导致交互逻辑直接报错

1. 修改HTML初始结构 #

移除按钮上默认携带的open类，同时修复未闭合的注释，初始状态保持未激活：

<div class="container">                                                                            
  <div class="emoji-btn">
    <img src='images/smileys.png' title='Smileys'>
    <!--this is the div I want to keep hidden till I click the button -->
    <div class="emoji-popup">
      <div class="emoji-wrapper"></div>
    </div>
  </div>
</div>

2. 补全必要CSS样式 #

给按钮添加相对定位作为弹窗的定位基准，新增open类激活时弹窗的可见样式，补全后完整CSS如下：

.emoji-btn {
  /* 作为内部绝对定位弹窗的基准元素 */
  position: relative;
  cursor: pointer;
}

.emoji-popup {
  position: absolute;
  top: -140px;
  left: 10px;
  height: 130px;
  width: 194px;
  background: #999;
  border-radius: 2px;
  text-align: left;
  overflow-y: auto;
  /* 默认隐藏状态 */
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s;
  box-sizing: border-box;
}

/* 按钮激活时弹窗显示 */
.emoji-btn.open .emoji-popup {
  opacity: 1;
  pointer-events: auto;
}

.emoji-wrapper {
  overflow: hidden;
  padding: 10px;
  box-sizing: border-box;
}
.emoji-popup .emoji-img {
  margin: auto;
  width: 30px;
  height: 30px;
  text-align: center;
  border-radius: 5px;
}

.emoji-popup .emoji-img:hover {
  background: rgba(0, 0, 0, 0.25);
}

3. 补全JS元素获取逻辑 #

在绑定事件前先获取按钮DOM节点，避免JS报错，完整JS如下：

// 提前获取按钮DOM元素
const emojibtn = document.querySelector('.emoji-btn');

emojibtn.addEventListener("click", function (e) {
  e.stopPropagation();
  this.classList.toggle("open");
});

document.body.addEventListener("click", function () {
  emojibtn.classList.remove("open");
});

修改完成后页面加载时弹窗默认处于关闭状态，仅点击表情按钮时才会展开，点击页面其他区域会自动关闭弹窗。

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