Question

我有一个网站，我有选择框div，当用户点击这些框时，它会显示隐藏的内容div，并将选择框div的背景图像替换为勾选。这一切工作正常，但如果有人点击快速或点击选择框div的不同区域，选择框div的背景图像可能会显示勾选甚至再次隐藏内容div。我已经尝试了谷歌搜索的各种方法，但大多数似乎与移动设备的延迟有关。如果有任何想法，请告诉我，我也知道我的代码可能不是最干净的。背景图像每个都是24kb，可能就是这样吗？我的代码如下：

$(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;	
}
.Content_Selection_Boxes{
  position:relative;
  float:left;
  width:33%;
  height:33%;	
  font-size:90%;
}
.Content_Answer_Holder{
  position:relative;
  float:left;
  width:100%;
  height:auto;
  margin-top:5%;	
}
.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>

Answer 1

请回顾一下：

在html中你错过了关闭标签标签
所以我需要修复css
在js部分中，我们的想法是确保。clickbox触发输入type =复选框对应于点击事件。

$(document).ready(function(){
        $(document).on('click','.checkbox',function(){
            var self = $(this),
            target=self.data('target');            
            self.prev('input').trigger('click');            
            $(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;
            }


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;    
}
.Content_Selection_Boxes{
    position:relative;
    float:left;
    width:33%;
    height:33%; 
    font-size:90%;
}
.Content_Answer_Holder{
    position:relative;
    float:left;
    width:100%;
    height:auto;
    margin-top:5%;  
}
.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"></label>
            <input type="checkbox" name="test"/>
            <div class="checkbox" data-target="#sb1"> Content1</div>
            </div>
            <div class="Content_Selection_Boxes">
            <label class="myCheckbox"></label><input type="checkbox" name="test"/><div class="checkbox" data-target="#sb2">Content2</div></div>
            <div class="Content_Selection_Boxes">
            <label class="myCheckbox"></label>
            <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>

Answer 2

根据我的理解，您希望在复选框更改后触发点击事件？，即使最终用户质量点击按钮也要匹配

如果是这样，你必须在＆＃34;更改＆＃34;相反，以便在值发生变化后触发

.on('change',function()

请参阅此处示例http://codepen.io/anon/pen/MbYEmK

下一次，RizkiDPrast指出在你提出问题之前要检查你的HTML标记

点击替换CSS在快速点击时无法正常工作

2 个答案: