Javascript 当我单击另一个元素时，如何使元素禁用？

我有5个社交媒体按钮，其中2个有由jquery slidetoggle触发的菜单。问题是，当点击twitter按钮时，它会在菜单出现时重新排列图标，并将它们全部击倒。我如何防止这种情况

这是我的密码：

$（“.button”）。单击（函数（）{
$（this）.closest（'.comment'）.find（“.box”）.toggle（）；
});
#图标{
宽度：450px；
填充：0px！重要；
}
.评论{
宽度：140px；
浮动：对；
}
.按钮{
宽度：25px；
显示：内联；
右边距：5px；
垂直对齐：顶部！重要；
高度：25px；
}
.盒子{
利润上限：-20px；
宽度：25px；
}
美国保险商实验室{
宽度：80px；
高度：35px；
填充：10px；
背景色：#fff；
}
ul.tw{
边界：0px；
}
李：正常{
右边距：25px！重要；
宽度：80px；
}
li.tw{
右边距：60px；
宽度：80px；
}
#隐藏的{
显示：无；
}
李{
填充：0！重要；
列表样式类型：无；
浮动：对；
}
a{
填充：0！重要；
字体系列：Arial；
字体大小：12px！重要；
文字装饰：下划线！重要；
颜色：#000000！重要；
左侧填充：10px；
}













我发现这里有很多不一致之处

首先把隐藏变成一个类。它会重复多次，所以不能是id

然后尝试：

.hidden
{
   display: none;
   position: absolute;
   z-index: 1000;
}

我对它进行了测试，它成功了。
不确定它是否会破坏您的布局，但它成功地将
position:absolute
添加到
#hidden
元素：

#hidden {
    display:none;
    position: absolute;
    margin-top: -10px;
}

。还添加了
边距顶部：-10px
，因为
-20px
的
.box
值使div越过了按钮。
我已经将您的所有代码复制到了JSFIDLE，您只需将
位置：绝对值
添加到
.box
类中，就像这样

jsFiddle：

CSS

有许多CSS问题需要解决。但最主要的是将位置
相对
和
绝对
组合起来，使下拉列表的位置正确


尝试将这些菜单设置为绝对位置，它应该可以解决您的问题。您是否尝试过绝对位置？必须与
框的
相对位置相关。不要忘记id必须是唯一的。您应该将
hidden
添加为类而不是id:
class=“box hidden”
。如果我使用您的解决方案，默认情况下会显示列表这不是您给出的答案，这是以隐藏为id的。对此，我深表歉意，我现在已经更新了代码笔，并清理了不必要的代码和其他问题。你的代码笔真的很棒，但如果我不接受另一个答案，那就有点不运动了。我会对你的另一个答案投赞成票
#icons {
    width: 450px;
    padding: 0px!important;
}
.comment {
    width: 140px;
    float: right;
}
.button {
    width: 25px;
    display: inline;
    margin-right: 5px;
    vertical-align: top!important;
    height: 25px;
}
.box {
    margin-top: -20px;
    width: 25px;
    position: absolute;
}
.box ul {
    width: 80px;
    height: 35px;
    padding: 10px;
    background-color: #fff;
}
ul.tw {
    border: 0px;
}
li.normal {
    margin-right: 25px!important;
    width: 80px;
}
li.tw {
    margin-right: 60px;
    width: 80px;
}
#hidden {
    display: none;
}
li {
    padding: 0!important;
    list-style-type: none;
    float: right;
}
a {
    padding: 0 !important;
    font-family: Arial;
    font-size: 12px !important;
    text-decoration: underline !important;
    color: #000000 !important;
    padding-left: 10px;
}

   #icons {
text-align: center;
}
.comment {
  display: inline-block;
}
.button {
  position: relative;
  display: inline-block;
  margin-right: 5px;
  vertical-align: top;
}
.box {
  position: absolute;
  top: 30px;
  right: 0;
}
.box ul {
  margin: 0;
  background-color: #fff;
}
ul li {
  display: block;
}
.hidden {
  display: none;
}
a {
  padding: 0 !important;
  font-family: Arial;
  font-size: 12px !important;
  text-decoration: underline !important;
  color: #000 !important;
  padding-left: 10px;
}