单击另一个元素时如何使元素禁用？

Question

我有 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

Answer 1

我看到这里有很多不一致之处。

首先把隐藏变成class。它自己重复不止一次，所以它不可能是一个 id。

然后尝试：

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

我测试了它并且有效。

Answer 2

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

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

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

Answer 3

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

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

Answer 4

有许多 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;
}

单击另一个元素时如何使元素禁用？

How do i get elements to disable when i click on another element?

html

javascript

css

jquery

slidetoggle