如何在CSS中实现点击时保持省略号图标可见？

嘿，我来帮你解决这个省略号点击后隐藏的问题！

问题根源分析 #

这种情况大概率是你在实现下拉菜单的交互时，不小心把省略号图标的可见性和下拉菜单的显示逻辑绑定在一起了——比如点击时通过JS把省略号设为display:none，或者用CSS类切换时误加了隐藏省略号的规则。

具体修复方案 #

1. 检查JavaScript交互代码

先看看你处理省略号点击事件的代码，有没有类似这样的错误操作：

// 错误示例：点击时主动隐藏了省略号
document.querySelector('.ellipsis-btn').style.display = 'none';

如果有的话，直接删掉这行代码！我们只需要控制下拉菜单的显示/隐藏，完全不需要动省略号的状态。

2. 修正CSS状态类规则

如果你是用CSS类（比如.active）来控制下拉菜单的显示，检查对应的CSS有没有把省略号的可见性也改了：

/* 错误示例：active状态下隐藏省略号 */
.ellipsis-btn.active {
  visibility: hidden;
}

把这部分规则删掉，只针对下拉菜单做状态切换：

/* 正确示例：只控制下拉菜单的显示 */
.dropdown-list {
  display: none;
  /* 其他定位、样式 */
}
.dropdown-list.active {
  display: block;
}

3. 处理层级覆盖问题（如果需要）

如果下拉菜单弹出后覆盖了省略号，那给省略号加个更高的z-index确保它在上方：

.ellipsis-btn {
  position: relative;
  z-index: 10; /* 数值比下拉菜单的z-index大就行 */
}
.dropdown-list {
  z-index: 5;
}

完整示例参考 #

假设你的HTML结构是这样的：

<div class="content-item">
  <p>这是一行内容</p>
  <button class="ellipsis-btn">⋮</button>
  <ul class="dropdown-list">
    <li>编辑</li>
    <li>删除</li>
  </ul>
</div>

对应的JS和CSS可以这么写：

const ellipsisBtn = document.querySelector('.ellipsis-btn');
const dropdownList = document.querySelector('.dropdown-list');

ellipsisBtn.addEventListener('click', () => {
  dropdownList.classList.toggle('active');
  // 这里只切换下拉菜单的状态，不要碰省略号！
});

.content-item {
  position: relative; /* 让下拉菜单相对它定位 */
}
.ellipsis-btn {
  background: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
  /* 确保一直可见 */
  display: inline-block;
  position: relative;
  z-index: 10;
}
.dropdown-list {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
  list-style: none;
  padding: 8px 0;
  width: 120px;
  z-index: 5;
}
.dropdown-list.active {
  display: block;
}
.dropdown-list li {
  padding: 6px 12px;
  cursor: pointer;
}
.dropdown-list li:hover {
  background: #f5f5f5;
}

这样调整后，点击省略号时下拉菜单会正常弹出，而省略号本身会一直保持可见啦！

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