Javascript <；部门>；选择“其他”时，标记向上移动

我有一个问题：

当您点击这个jsfiddle上的compose按钮时，一个帖子会下拉下来，上面显示各种颜色。注意当你点击中间的颜色或者任何颜色时，颜色左边的所有颜色都会稍微移动，产生奇怪的效果。如何防止所选div左侧的所有颜色向上移动，并实际上保持它们在原来的位置

谢谢

HTML:

JS:

---

看起来

#gray

的CSS还有一些其他属性，如果你模仿其他属性，轻微的移动似乎消失了：

 #gray {
 position: relative;
 left: 645px;
 bottom: 332px;
 background-color: #0c3930;}

希望这有帮助

您的

#active

属性会更改颜色的大小：

.active{
    height: 18px;
    width: 45px;
    z-index: 1;
    border: 1px solid white;
}

如果将其更改为：

.active{
    height: 14px;
    width: 45px;
    z-index: 1;
    border: 1px solid white;
}

---

效果似乎消失了。

对我来说，你完全可以重写你的CSS。我认为，把每一个元素都放在适当的位置，最终会让你遇到更多的问题

通过将所有这些“click”处理程序向下折叠为一个函数，可以节省大量代码。如上所述，您可以将上面的整个JS更改为类似于

$（'.color'）。单击（function（）{$（'.active'）。removeClass（'active'）；$（this）.addClass（'active'）；}）这些“颜色”元素中的每一个都有不同的“底部”值。为什么？似乎您不应该（a）更改“活动”元素的大小；（b） 给每个人相同的位置；（c）给“.color”元素一个“1px实心透明”的边框。尝试附加一个JSFIDLE——我似乎不太明白你的意思@Craigheadthe JSFIDLE在进行此更改时似乎没有发生变化这里是-也许我误解了这个问题。是的，它仍然存在相同的问题。啊，我现在看到了-我正在查看较低的“此处写入头”是如何稍微向上移动的。很抱歉，非常感谢！你真是个天才@PhlumeIt还需要将“#gray”元素的CSS中的“height”去掉。如果你喜欢这个答案，你可以接受，我接受；-）是的，对不起，刚才说我要等四分钟才接受你的回答@Phlumean最后一件事，当你点击一种颜色时，我试图让它看起来有点像这样：所以我需要颜色变大一点并居中，这怎么可能@韧皮部
 #gray {
 position: relative;
 left: 645px;
 bottom: 332px;
 background-color: #0c3930;}

.active{
    height: 18px;
    width: 45px;
    z-index: 1;
    border: 1px solid white;
}

.active{
    height: 14px;
    width: 45px;
    z-index: 1;
    border: 1px solid white;
}