0
我有一个网站，我有选择框divs，当用户点击这些盒子时，它揭示了一个隐藏的内容div，也取代了选择框div的背景图像到一个蜱。这一切工作正常，但如果有人点击快速或点击选择框div的不同区域，选择框div的背景图像可能会显示tick，即使内容div再次隐藏。 我曾尝试过使用Google的各种方法，但大多数似乎都涉及到移动设备上的延迟。如果任何人有任何想法，请让我知道，我也知道我的代码可能不是最干净的。背景图像的大小为24kb，可以这样吗？我的代码如下：当点击替换CSS无法正常工作，快速点击
$(document).ready(function(){
$(document).on('click','.checkbox',function(){
target=$(this).data('target');
$(target).slideToggle(400);
});
});/* Option Boxes */
.checkbox{
width:100%;
height: 50px;
position:relative;
float:left;
background-repeat:no-repeat;
background-image:url(../Images/Options/Template.png);
background-position: center center;
font-size:1.2em;
color:#000;
padding-top:2%;
text-align:center;
line-height:-100px;
margin-right:15%;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default;
}
.myCheckbox input {
display:none;
}
.myCheckbox input:checked + .checkbox{
width:100%;
height: 50px;
background-image: url("../Images/Options/Template-Tick.png");
color:#999;
}
/* Option Boxes */
.Content_Selection_Holder{
position:relative;
float:left;
width:100%;
height:auto; \t
}
.Content_Selection_Boxes{
position:relative;
float:left;
width:33%;
height:33%; \t
font-size:90%;
}
.Content_Answer_Holder{
position:relative;
float:left;
width:100%;
height:auto;
margin-top:5%; \t
}
.Content_Answer_Box{
position:relative;
float:left;
width:96%;
padding:2%;
height:auto;
display: none;
}<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<div class="Content_Selection_Holder">
<div class="Content_Selection_Boxes"><label class="myCheckbox"><input type="checkbox" name="test"/><div class="checkbox" data-target="#sb1"> Content1</div></div>
<div class="Content_Selection_Boxes"><label class="myCheckbox"><input type="checkbox" name="test"/><div class="checkbox" data-target="#sb2">Content2</div></div>
<div class="Content_Selection_Boxes"><label class="myCheckbox"><input type="checkbox" name="test"/><div class="checkbox" data-target="#sb3">Content3</div></div>
</div> <!-- Question Holder-->
<div class="Content_Answer_Holder">
<div class="Content_Answer_Box" title="Some content 1" id="sb1">
Some content 1
</div>
<div class="Content_Answer_Box" title="Content2" id="sb2">
Some content 2
</div>
<div class="Content_Answer_Box" title="Content3" id="sb3">
Some content 3
</div>
</div>
</div>
</div>
</div>
谢谢你这么多里兹之前，无法相信我错过了结束标签标记为下一次好！干杯 – mattyt81