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