当我点击另一个元素时，如何让元素禁用？ [英] How do i get elements to disable when i click on another element?
本文介绍了当我点击另一个元素时，如何让元素禁用？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有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 =boxid =hidden> < ul class =normal> < li class =normal>< a href =https://twitter.com/theoriginaldoctarget =_ 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 =boxid =hidden> < ul class =tw> < li class =tw>< a href =https://twitter.com/theoriginaldoctarget =_ 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.pngid =socialImage/> < / a> < / div> < div class =button> < a href =https://www.youtube.com/user/DOCJOHNSON1976target =_ blank> < img src =http://devjohnson.com/skin/frontend/dJTheme/default/images/youtube_icon.png/> < / a> < / div> < div class =button> < a href =http://instagram.com/docjohnsonusatarget =_ blank> < img src =http://devjohnson.com/skin/frontend/dJTheme/default/images/instagram_icon.png/> < / a> < / div> < / div> < / body>
解决方案
不知道可以打破你的布局，但它工作添加位置：绝对到 #hidden 元素：
#hidden {
display：none;
position：absolute;
margin-top：-10px;
}
小提琴 。还添加了 margin-top：-10px ，因为 .box code>使得div超过了按钮。
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>
解决方案
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.
这篇关于当我点击另一个元素时，如何让元素禁用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
