Question

我有一个基本的jQuery手风琴和一个自定义构建复选框，手风琴效果很好，掉落和缩回上舔。

问题出在我自己的复选框上，我可以通过点击支票来检查或取消选中，但是在我的手风琴中，它似乎是无法点击的。有谁知道为什么？

在这里工作小提琴

包括手风琴外的工作复选框

http://jsfiddle.net/edsilv/cgn4s8y7/#&togetherjs=R73iidT8Vq

$(function() {
  var icons = {
    "header": "ui-icon-plusthick",
    "activeHeader": "ui-icon-minusthick"
  };
  
  $("#accordion").accordion({
    icons: icons,
    heightStyle: "content",
    active: false,
    collapsible: true,
  });
});

.row-accord {
  display: flex;
  flex-direction: row;
}
.row-accord span {
  line-height: 36px;
}
input[type=checkbox] {
  display: none;
}
input[type=checkbox] + .accord-text:before {
  width: 36px;
  height: 36px;
  border-radius: 100%;
  background-color: #f5f5f5;
  border: 2px solid rgba(0, 0, 0, 0.42);
  display: block;
  margin-right: 20px;
  content: "";
  color: green;
}
input[type=checkbox]:checked + .accord-text:before {
  content: "\2713";
  text-align: center;
  vertical-align: middle;
  font-size: xx-large;
  background-color: #f1f1f1;
  border: 2px solid green;
  line-height: 36px;
  font-weight: bolder;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">

<div id="accordion">
  <div class="row-accord">
    <label for=''>
      <input type='checkbox' class='singlecheck' checked/>
      <div class="accord-text"></div>
    </label>
    <span>
      title here
    </span>
  </div>
  <div>
    hidden content here
  </div>
</div>

Answer 1

我认为将复选框设置为隐藏，可以防止点击互动的行为与默认情况下一样。

通过添加自定义点击处理程序，这是解决您遇到的问题的一种方法。

例如（它不完美，但展示了解决方案）：

$('input[type=checkbox] + .accord-text').click(function() {
    var isChecked = $(this).prev().prop('checked');
    $(this).prev().prop('checked', !isChecked);
});

这里的工作小提琴： https://jsfiddle.net/221mdv9p/

更新

要缩小复选框点击区域的区域，您可以尝试添加以下样式：

.accord-text { display: inline-block; }

https://jsfiddle.net/221mdv9p/1/

更新2

您还可以使用evt.stopPropagation()停止传播到外部容器的点击。 https://jsfiddle.net/221mdv9p/2/

在手风琴中构建自定义复选框

1 个答案:

更新

更新2