我连续有 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>最佳答案
不确定它是否会破坏您的布局，但它可以将 position:absolute 添加到 #hidden 元素:
#hidden {
display:none;
position: absolute;
margin-top: -10px;
}
Fiddle 。还添加了 margin-top: -10px，因为 -20px 的 .box 值使 div 越过了按钮。
关于javascript - 单击另一个元素时如何禁用元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31749114/