jquery - 在 Accordion 中构建自定义复选框

Question

我有一个基本的 jQuery Accordion 和一个自定义构建复选框， Accordion 运行良好，在点击时掉落和缩回。

问题出在我的复选框上，我可以通过单击检查来选中或取消选中，但是在我的 Accordion 中它似乎是不可点击的。有谁知道为什么吗？

在这里工作

包括 Accordion 外的工作复选框

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);
});

在这里工作 fiddle : https://jsfiddle.net/221mdv9p/

更新

要减少复选框点击区域的面积，您可以尝试添加以下样式:

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

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

更新2

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