单击复选框时，如何停止手风琴（可折叠）关闭

Question

我希望用户能够在不关闭手风琴琴体的情况下选中复选框。

我试图阻止传播，但我无法让它发挥作用。

我使用MaterializeCSS框架但是，它没有提供任何选项来覆盖此行为。

＆＃13;

＆＃13;

body {
  margin: 0;
  padding: 0;
}

.collapsible-header {
  position: relative;
}

.test {
  position: absolute;
  right: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/js/materialize.min.js"></script>

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<ul class="collapsible" data-collapsible="accordion">
  <li>
    <div class="collapsible-header"><i class="material-icons">filter_drama</i>First
      <span class="test">
        <input id="demo-1" name="demo-1" type="checkbox">
        <label for="demo-1"></label>
      </span>
    </div>
    <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
  </li>
  <li>
    <div class="collapsible-header"><i class="material-icons">place</i>Second
      <span class="test">
        <input id="demo-2" name="demo-2" type="checkbox">
        <label for="demo-2"></label>
      </span>
    </div>
    <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
  </li>
  <li>
    <div class="collapsible-header"><i class="material-icons">whatshot</i>Third
      <span class="test">
        <input id="demo-3" name="demo-3" type="checkbox">
        <label for="demo-3"></label>
      </span>
    </div>
    <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

有什么想法吗？

Answer 1

这很简单：只需停止点击事件从输入组传播（使用event.stopPropagation），其示例中的类为test：

＆＃13;

＆＃13;

$(function() {
  $('.collapsible .test').on('click', function(e) {
    e.stopPropagation();
  });
});

＆＃13;

body {
  margin: 0;
  padding: 0;
}

.collapsible-header {
  position: relative;
}

.test {
  position: absolute;
  right: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/js/materialize.min.js"></script>

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<ul class="collapsible" data-collapsible="accordion">
  <li>
    <div class="collapsible-header"><i class="material-icons">filter_drama</i>First
      <span class="test">
        <input id="demo-1" name="demo-1" type="checkbox">
        <label for="demo-1"></label>
      </span>
    </div>
    <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
  </li>
  <li>
    <div class="collapsible-header"><i class="material-icons">place</i>Second
      <span class="test">
        <input id="demo-2" name="demo-2" type="checkbox">
        <label for="demo-2"></label>
      </span>
    </div>
    <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
  </li>
  <li>
    <div class="collapsible-header"><i class="material-icons">whatshot</i>Third
      <span class="test">
        <input id="demo-3" name="demo-3" type="checkbox">
        <label for="demo-3"></label>
      </span>
    </div>
    <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;