当我单击另一个元素时，如何让元素禁用？答案

【问题标题】：How do i get elements to disable when i click on another element?当我单击另一个元素时，如何让元素禁用？
【发布时间】：2015-07-31 14:49:54
【问题描述】：

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

这是我的代码：

$(".button").click(function() {


  $(this).closest('.comment').find(".box").toggle();



});

#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;
}
.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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<body>

<div id="icons">
  <div class="comment">
    <div class="button">
      <img src="http://devjohnson.com/skin/frontend/dJTheme/default/images/facebook_icon.png">
    </div>
    <div class="box" id="hidden">
      <ul class="normal">
        <li class="normal"><a href="https://twitter.com/theoriginaldoc" target="_blank">DocJohnson</a>

        </li>
        <li class="normal"><a href="https://twitter.com/askthedocshow">Ask The Doc</a>

        </li>
      </ul>
    </div>
  </div>
  <div class="comment">
    <div class="button">
      <img src="http://devjohnson.com/skin/frontend/dJTheme/default/images/twitter_icon.png">
    </div>
    <div class="box" id="hidden">
      <ul class="tw">
        <li class="tw"><a href="https://twitter.com/theoriginaldoc" target="_blank">DocJohnson</a>

        </li>
        <li class="tw"><a href="https://twitter.com/askthedocshow">Ask The Doc</a>

        </li>
      </ul>
    </div>

    <div class="button">
      <a href="http://docjohnsonusa.tumblr.com/" target="_blank">
        <img src="http://devjohnson.com/skin/frontend/dJTheme/default/images/tumblr_icon.png" id="socialImage" />
      </a>
    </div>
    <div class="button">
      <a href="https://www.youtube.com/user/DOCJOHNSON1976" target="_blank">
        <img src="http://devjohnson.com/skin/frontend/dJTheme/default/images/youtube_icon.png" />
      </a>
    </div>
    <div class="button">
      <a href="http://instagram.com/docjohnsonusa" target="_blank">
        <img src="http://devjohnson.com/skin/frontend/dJTheme/default/images/instagram_icon.png" />
      </a>
    </div>

  </div>

  </body>

Fiddle

【问题讨论】：

尝试将那些菜单设置为绝对位置，它应该可以解决您的问题
你试过绝对定位吗？
必须与.box 的relative 位置相关。不要忘记id 必须是unique。您应该将 hidden 添加为 class 而不是 id：class="box hidden".

标签： javascript jquery html css slidetoggle

【解决方案1】：

不确定它是否会破坏您的布局，但可以将 position:absolute 添加到 #hidden 元素：

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

Fiddle。还添加了margin-top: -10px，因为-20px 的.box 值使div 越过了按钮。

【讨论】：

【解决方案2】：

有许多 CSS 问题需要修复。但主要是结合位置relative 和absolute 使下拉菜单位置正确。

http://codepen.io/anon/pen/WvLwdx

   #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;
}

【讨论】：

对不起，我已经更新了codepen，清理了不必要的代码和其他问题。
您的 codepen 真的很棒，但如果我不接受其他答案，我会有点不高兴。我会在你的另一个答案上投票给你

【解决方案3】：

我已将您的所有代码复制到 jsFiddle，您只需将 position: absolute 添加到您的 .box 类中，就像这样

jsFiddle : https://jsfiddle.net/g1Lfg7y5/

CSS

#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;
}

【讨论】：

【解决方案4】：

我在这里看到很多不一致的地方。

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

那就试试吧：

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

我测试了它并且它有效。

【讨论】：

如果我使用你的解决方案，列表会默认显示
这不是你给出的答案，仍然是 hidden 作为 id