Question

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

这是我的代码：

$(".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

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

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

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

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

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

Answer 4

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

首先将隐藏成一个类。它不止一次地重复，所以它不能成为一个id。

然后尝试：

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

我测试了它并且有效。

当我点击另一个元素时如何获取要禁用的元素？

4 个答案: