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

I have 5 social media buttons in a row, 2 of which have menus which are triggered by jquery slidetoggle. The problem is, that when the twitter button is clicked it rearranges the icons as the menu appears and knocks them all out of place. How do i prevent this?

Here is my code:

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

Not sure if it can break your layout, but it worked adding position:absolute to the #hidden element:

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

Fiddle. Also added margin-top: -10px because the .box value of -20px was making the div get over the button.

There are a number of CSS things to fix. But the main thing is a combination of position relative and absolute to make the dropdowns position properly.

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

I have copied all of your code to a jsFiddle, all you need to do is add position: absolute to your .box class like so

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

I see lots of inconsistencies here.

First of all turn hidden into a class. It repeats itself more than once so it can't be an id.

Then try:

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

I tested it and it worked.

来源：https://stackoverflow.com/questions/31749114/how-do-i-get-elements-to-disable-when-i-click-on-another-element

标签

javascript

jquery

html

css

slidetoggle