无法在移动视图中取消选中输入类型复选框

Question

我正在尝试创建一个响应表，我将其中大部分都放下来了，我试图让手风琴就像在较小的分辨率下观看一样，不幸的是，当单击复选框时，它不会取消选中（缩回） 。我可能错过了一些非常明显或完全错误的事情。我已经尝试使用JS来创建函数。有人可以指出我正确的方向吗？

$(function() {

  $(".close").on('change', function(e) {
    var el = $(this); {
      $(".close").not(el).prop('checked', false);
    }

  });

});

body {
  background: #cacaca;
  margin: 0;
  padding: 20px;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 300;
}

#table {
  display: table;
  width: 100%;
  background: #fff;
  margin: 0;
  box-sizing: border-box;
}

.caption {
  display: block;
  width: 100%;
  background: #64e0ef;
  height: 55px;
  padding-left: 10px;
  color: #fff;
  font-size: 20px;
  line-height: 55px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
  box-sizing: border-box;
}

.header-row {
  background: #8b8b8b;
  color: #fff;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  padding: 6px;
  border-bottom: 1px solid #e5e5e5;
  text-align: center;
}

.primary {
  text-align: left;
}

input[type="radio"],
input[type="checkbox"] {
  display: none;
}

@media only screen and (max-width: 760px) {
  body {
    padding: 0;
  }
  #table {
    display: block;
    margin: 44px 0 0 0;
  }
  .caption {
    position: fixed;
    top: 0;
    text-align: center;
    height: 44px;
    line-height: 44px;
    z-index: 5;
    border-bottom: 2px solid #999;
  }
  .row {
    position: relative;
    display: block;
    border-bottom: 1px solid #ccc;
  }
  .header-row {
    display: none;
  }
  .cell {
    display: block;
    border: none;
    position: relative;
    height: 45px;
    line-height: 45px;
    text-align: left;
  }
  .primary:after {
    content: "";
    display: block;
    position: absolute;
    right: 20px;
    top: 18px;
    z-index: 2;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid #ccc;
  }
  .cell:nth-of-type(n+2) {
    display: none;
  }
  input[type="radio"],
  input[type="checkbox"] {
    display: block;
    position: absolute;
    z-index: 1;
    width: 99%;
    height: 100%;
    opacity: 0;
  }
  input[type="radio"]:checked,
  input[type="checkbox"]:checked {
    z-index: -1;
  }
  input[type="radio"]:checked~.cell,
  input[type="checkbox"]:checked~.cell {
    display: block;
    border-bottom: 1px solid #eee;
  }
  input[type="radio"]:checked~.cell:nth-of-type(n+2),
  input[type="checkbox"]:checked~.cell:nth-of-type(n+2) {
    background: #e0e0e0;
  }
  input[type="radio"]:checked~.cell:nth-of-type(n+2):before,
  input[type="checkbox"]:checked~.cell:nth-of-type(n+2):before {
    content: attr(data-label);
    display: inline-block;
    width: 60px;
    background: #999;
    border-radius: 10px;
    height: 20px;
    margin-right: 10px;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    color: white;
  }
  input[type="radio"]:checked~.primary,
  input[type="checkbox"]:checked~.primary {
    border-bottom: 2px solid #999;
  }
  input[type="radio"]:checked~.primary:after,
  input[type="checkbox"]:checked~.primary:after {
    position: absolute;
    right: 18px;
    top: 22px;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    border-top: 10px solid #ccc;
    z-index: 2;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="caption">Main Title</div>
<div id="table">
  <div class="header-row row">
    <span class="cell primary">
      <!--stuff here to add text in first prim cell --></span>
    <span class="cell">Developer</span>
    <span class="cell">Foundation</span>
    <span class="cell">Accelerator</span>
    <span class="cell">Enterprise</span>
  </div>
  <div class="row">
    <input type="checkbox" name="expand" class="close">
    <span class="cell primary" data-label="Category">Item 1</span>
    <span class="cell" data-label="Category">Sub Item</span>
    <span class="cell" data-label="Category">Sub Item</span>
    <span class="cell" data-label="Category">Sub Item</span>
    <span class="cell" data-label="Category">Sub Item</span>
  </div>
  <div class="row">
    <input type="checkbox" name="expand" class="close">
    <span class="cell primary" data-label="Category">Item 2</span>
    <span class="cell" data-label="Category">Sub Item</span>
    <span class="cell" data-label="Category">Sub Item</span>
    <span class="cell" data-label="Category">Sub Item</span>
    <span class="cell" data-label="Category">Sub Item</span>
  </div>
  <div class="row">
    <input type="checkbox" name="expand" class="close">
    <span class="cell primary" data-label="Category">Item 3</span>
    <span class="cell" data-label="Category">Sub Item</span>
    <span class="cell" data-label="Category">Sub Item</span>
    <span class="cell" data-label="Category">Sub Item</span>
    <span class="cell" data-label="Category">Sub Item</span>
  </div>
  <div class="row">
    <input type="checkbox" name="expand" class="close">
    <span class="cell primary" data-label="Category">Item 4</span>
    <span class="cell" data-label="Category">Sub Item</span>
    <span class="cell" data-label="Category">Sub Item</span>
    <span class="cell" data-label="Category">Sub Item</span>
    <span class="cell" data-label="Category">Sub Item</span>
  </div>
  <div class="row">
    <input type="checkbox" name="expand" class="close">
    <span class="cell primary" data-label="Category">Item 5</span>
    <span class="cell" data-label="Category">Sub Item</span>
    <span class="cell" data-label="Category">Sub Item</span>
    <span class="cell" data-label="Category">Sub Item</span>
    <span class="cell" data-label="Category">Sub Item</span>
  </div>
  <div class="row">
    <input type="checkbox" name="expand" class="close">
    <span class="cell primary" data-label="Category">Item 6</span>
    <span class="cell" data-label="Category">Sub Item</span>
    <span class="cell" data-label="Category">Sub Item</span>
    <span class="cell" data-label="Category">Sub Item</span>
    <span class="cell" data-label="Category">Sub Item</span>
  </div>
</div>

Answer 1

它像手风琴一样工作，这意味着如果你打开另一个项目，其他项目就会崩溃。如果您还要在重新点击/重新点击时关闭活动的一个，则需要触发复选框上的点击。

将以下内容添加到您的JavaScript代码中，它将解决您的问题。

$('.primary').on('click', function() { $(this).prev().trigger('click'); })

作为第一次使用它的原因的解释，这是因为你第一次点击了复选框，但之后，主要单元格会过来并捕获指针事件。

Answer 2

你可以修复它在第一个div行之前添加一个新的输入复选框。检查一下：

＆＃13;

＆＃13;

$(function() {
    $(".close").on('click', function(e) {
        $(".close").not(this).prop('checked', false);
    });
});

＆＃13;

body {
  background: #cacaca;
  margin: 0;
  padding: 20px;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 300;
}

#table {
  display: table;
  width: 100%;
  background: #fff;
  margin: 0;
  box-sizing: border-box;
}

.caption {
  display: block;
  width: 100%;
  background: #64e0ef;
  height: 55px;
  padding-left: 10px;
  color: #fff;
  font-size: 20px;
  line-height: 55px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
  box-sizing: border-box;
}

.header-row {
  background: #8b8b8b;
  color: #fff;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  padding: 6px;
  border-bottom: 1px solid #e5e5e5;
  text-align: center;
}

.primary {
  text-align: left;
}

input[type="radio"],
input[type="checkbox"] {
  display: none;
}

@media only screen and (max-width: 760px) {
  body {
    padding: 0;
  }
  #table {
    display: block;
    margin: 44px 0 0 0;
  }
  .caption {
    position: fixed;
    top: 0;
    text-align: center;
    height: 44px;
    line-height: 44px;
    z-index: 5;
    border-bottom: 2px solid #999;
  }
  .row {
    position: relative;
    display: block;
    border-bottom: 1px solid #ccc;
  }
  .header-row {
    display: none;
  }
  .cell {
    display: block;
    border: none;
    position: relative;
    height: 45px;
    line-height: 45px;
    text-align: left;
  }
  .primary:after {
    content: "";
    display: block;
    position: absolute;
    right: 20px;
    top: 18px;
    z-index: 2;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid #ccc;
  }
  .cell:nth-of-type(n+2) {
    display: none;
  }
  input[type="radio"],
  input[type="checkbox"] {
    display: block;
    position: absolute;
    z-index: 1;
    width: 99%;
    height: 100%;
    opacity: 0;
  }
  input[type="radio"]:checked,
  input[type="checkbox"]:checked {
    z-index: -1;
  }
  input[type="radio"]:checked~.cell,
  input[type="checkbox"]:checked~.cell {
    display: block;
    border-bottom: 1px solid #eee;
  }
  input[type="radio"]:checked~.cell:nth-of-type(n+2),
  input[type="checkbox"]:checked~.cell:nth-of-type(n+2) {
    background: #e0e0e0;
  }
  input[type="radio"]:checked~.cell:nth-of-type(n+2):before,
  input[type="checkbox"]:checked~.cell:nth-of-type(n+2):before {
    content: attr(data-label);
    display: inline-block;
    width: 60px;
    background: #999;
    border-radius: 10px;
    height: 20px;
    margin-right: 10px;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    color: white;
  }
  input[type="radio"]:checked~.primary,
  input[type="checkbox"]:checked~.primary {
    border-bottom: 2px solid #999;
  }
  input[type="radio"]:checked~.primary:after,
  input[type="checkbox"]:checked~.primary:after {
    position: absolute;
    right: 18px;
    top: 22px;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    border-top: 10px solid #ccc;
    z-index: 2;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="caption">Main Title</div>
<div id="table">
  <div class="header-row row">
    <span class="cell primary">
      <!--stuff here to add text in first prim cell --></span>
    <span class="cell">Developer</span>
    <span class="cell">Foundation</span>
    <span class="cell">Accelerator</span>
    <span class="cell">Enterprise</span>
  </div>
  <input type="checkbox" name="expand" class="close">
  <div class="row">
    <input type="checkbox" name="expand" class="close">
    <span class="cell primary" data-label="Category">Item 1</span>
    <span class="cell" data-label="Category">Sub Item</span>
    <span class="cell" data-label="Category">Sub Item</span>
    <span class="cell" data-label="Category">Sub Item</span>
    <span class="cell" data-label="Category">Sub Item</span>
  </div>
  <div class="row">
    <input type="checkbox" name="expand" class="close">
    <span class="cell primary" data-label="Category">Item 2</span>
    <span class="cell" data-label="Category">Sub Item</span>
    <span class="cell" data-label="Category">Sub Item</span>
    <span class="cell" data-label="Category">Sub Item</span>
    <span class="cell" data-label="Category">Sub Item</span>
  </div>
  <div class="row">
    <input type="checkbox" name="expand" class="close">
    <span class="cell primary" data-label="Category">Item 3</span>
    <span class="cell" data-label="Category">Sub Item</span>
    <span class="cell" data-label="Category">Sub Item</span>
    <span class="cell" data-label="Category">Sub Item</span>
    <span class="cell" data-label="Category">Sub Item</span>
  </div>
  <div class="row">
    <input type="checkbox" name="expand" class="close">
    <span class="cell primary" data-label="Category">Item 4</span>
    <span class="cell" data-label="Category">Sub Item</span>
    <span class="cell" data-label="Category">Sub Item</span>
    <span class="cell" data-label="Category">Sub Item</span>
    <span class="cell" data-label="Category">Sub Item</span>
  </div>
  <div class="row">
    <input type="checkbox" name="expand" class="close">
    <span class="cell primary" data-label="Category">Item 5</span>
    <span class="cell" data-label="Category">Sub Item</span>
    <span class="cell" data-label="Category">Sub Item</span>
    <span class="cell" data-label="Category">Sub Item</span>
    <span class="cell" data-label="Category">Sub Item</span>
  </div>
  <div class="row">
    <input type="checkbox" name="expand" class="close">
    <span class="cell primary" data-label="Category">Item 6</span>
    <span class="cell" data-label="Category">Sub Item</span>
    <span class="cell" data-label="Category">Sub Item</span>
    <span class="cell" data-label="Category">Sub Item</span>
    <span class="cell" data-label="Category">Sub Item</span>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

在内容周围使用标签。

$(function() {

  $(".close").on('change', function(e) {
    var el = $(this); {
      $(".close").not(el).prop('checked', false);
    }

  });

});

body {
  background: #cacaca;
  margin: 0;
  padding: 20px;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 300;
}

#table {
  display: table;
  width: 100%;
  background: #fff;
  margin: 0;
  box-sizing: border-box;
}

.caption {
  display: block;
  width: 100%;
  background: #64e0ef;
  height: 55px;
  padding-left: 10px;
  color: #fff;
  font-size: 20px;
  line-height: 55px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
  box-sizing: border-box;
}

.header-row {
  background: #8b8b8b;
  color: #fff;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  padding: 6px;
  border-bottom: 1px solid #e5e5e5;
  text-align: center;
}

.primary {
  text-align: left;
}

input[type="radio"],
input[type="checkbox"] {
  display: none;
}

@media only screen and (max-width: 760px) {
  body {
    padding: 0;
  }
  #table {
    display: block;
    margin: 44px 0 0 0;
  }
  .caption {
    position: fixed;
    top: 0;
    text-align: center;
    height: 44px;
    line-height: 44px;
    z-index: 5;
    border-bottom: 2px solid #999;
  }
  .row {
    position: relative;
    display: block;
    border-bottom: 1px solid #ccc;
  }
  .header-row {
    display: none;
  }
  .cell {
    display: block;
    border: none;
    position: relative;
    height: 45px;
    line-height: 45px;
    text-align: left;
  }
  .primary:after {
    content: "";
    display: block;
    position: absolute;
    right: 20px;
    top: 18px;
    z-index: 2;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid #ccc;
  }
  .cell:nth-of-type(n+2) {
    display: none;
  }
  input[type="radio"],
  input[type="checkbox"] {
    display: block;
    position: absolute;
    z-index: 1;
    width: 99%;
    height: 100%;
    opacity: 0;
  }
  input[type="radio"]:checked,
  input[type="checkbox"]:checked {
    z-index: -1;
  }
  input[type="radio"]:checked~.cell,
  input[type="checkbox"]:checked~.cell {
    display: block;
    border-bottom: 1px solid #eee;
  }
  input[type="radio"]:checked~.cell:nth-of-type(n+2),
  input[type="checkbox"]:checked~.cell:nth-of-type(n+2) {
    background: #e0e0e0;
  }
  input[type="radio"]:checked~.cell:nth-of-type(n+2):before,
  input[type="checkbox"]:checked~.cell:nth-of-type(n+2):before {
    content: attr(data-label);
    display: inline-block;
    width: 60px;
    background: #999;
    border-radius: 10px;
    height: 20px;
    margin-right: 10px;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    color: white;
  }
  input[type="radio"]:checked~.primary,
  input[type="checkbox"]:checked~.primary {
    border-bottom: 2px solid #999;
  }
  input[type="radio"]:checked~.primary:after,
  input[type="checkbox"]:checked~.primary:after {
    position: absolute;
    right: 18px;
    top: 22px;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    border-top: 10px solid #ccc;
    z-index: 2;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="caption">Main Title</div>
<div id="table">
  <div class="header-row row">
    <span class="cell primary">
      <!--stuff here to add text in first prim cell --></span>
    <span class="cell">Developer</span>
    <span class="cell">Foundation</span>
    <span class="cell">Accelerator</span>
    <span class="cell">Enterprise</span>
  </div>
  <div class="row"><label>
    <input type="checkbox" name="expand" class="close">
    <span class="cell primary" data-label="Category">Item 1</span>
    <span class="cell" data-label="Category">Sub Item</span>
    <span class="cell" data-label="Category">Sub Item</span>
    <span class="cell" data-label="Category">Sub Item</span>
    <span class="cell" data-label="Category">Sub Item</span>
</label>
  </div>
  <div class="row"><label>
    <input type="checkbox" name="expand" class="close">
    <span class="cell primary" data-label="Category">Item 2</span>
    <span class="cell" data-label="Category">Sub Item</span>
    <span class="cell" data-label="Category">Sub Item</span>
    <span class="cell" data-label="Category">Sub Item</span>
    <span class="cell" data-label="Category">Sub Item</span>
</label>
  </div>
  <div class="row"><label>
    <input type="checkbox" name="expand" class="close">
    <span class="cell primary" data-label="Category">Item 3</span>
    <span class="cell" data-label="Category">Sub Item</span>
    <span class="cell" data-label="Category">Sub Item</span>
    <span class="cell" data-label="Category">Sub Item</span>
    <span class="cell" data-label="Category">Sub Item</span></label>
  </div>
  <div class="row"><label>
    <input type="checkbox" name="expand" class="close">
    <span class="cell primary" data-label="Category">Item 4</span>
    <span class="cell" data-label="Category">Sub Item</span>
    <span class="cell" data-label="Category">Sub Item</span>
    <span class="cell" data-label="Category">Sub Item</span>
    <span class="cell" data-label="Category">Sub Item</span></label>
  </div>
  <div class="row"><label>
    <input type="checkbox" name="expand" class="close">
    <span class="cell primary" data-label="Category">Item 5</span>
    <span class="cell" data-label="Category">Sub Item</span>
    <span class="cell" data-label="Category">Sub Item</span>
    <span class="cell" data-label="Category">Sub Item</span>
    <span class="cell" data-label="Category">Sub Item</span></label>
  </div>
  <div class="row"><label>
    <input type="checkbox" name="expand" class="close">
    <span class="cell primary" data-label="Category">Item 6</span>
    <span class="cell" data-label="Category">Sub Item</span>
    <span class="cell" data-label="Category">Sub Item</span>
    <span class="cell" data-label="Category">Sub Item</span>
    <span class="cell" data-label="Category">Sub Item</span></label>
  </div>
</div>