如何让我的拨动开关工作？

Question

我有以下代码：jQuery + Bootstrap

jQuery 元素：

$(document).ready(function() {

  $('input:checkbox').change(function() {
    if ($("#toggle1").is(":checked")) {
      $("#collapseOneC1").collapse('show');
      $("#collapseTwoC1").collapse('show');
      $("#collapseThreeC1").collapse('show');
    } else {
      $("#collapseOneC1").collapse('hide');
      $("#collapseTwoC1").collapse('hide');
      $("#collapseThreeC1").collapse('hide');
    }
  });
  //Toggle on Element Collapse
  $("#collapseOneC1, #collapseTwoC1, #collapseThreeC1").on('shown.bs.collapse', function() {
    $('#toggle1').prop("checked", true);
  });
  $("#collapseOneC1, #collapseTwoC1, #collapseThreeC1").on('hidden.bs.collapse', function() {
    $('#toggle1').prop("checked", false);
  });
});

问题陈述： 只有在显示所有选项面板时才应检查切换开关（当您单击选项面板以单独打开时）。如何通过编辑以上代码来实现？

感谢审阅！！

Answer 1

您需要添加一个条件来检查是否显示了所有选项，这意味着您需要检查它们是否都具有 class .show 使用 JQuery函数.hasClass()

if ($('#collapseOneC1').hasClass('show') && $('#collapseTwoC1').hasClass('show') && $('#collapseThreeC1').hasClass('show')) {
  $('#toggle1').prop("checked", true);
}

See updated fiddle

Answer 2

请检查更新后的代码： https://jsfiddle.net/KlaussU/a27rffb2/6/

    if(areAllOptionsExpanded()) {
           $('#toggle1').prop("checked", true);
    }
function areAllOptionsExpanded() {
    return $(".card-header.collapsed").length == 0;
}

我认为这是一个更好的解决方案，因为您不必为将来可能要添加（或删除）的每个选项手动添加 $('#collapseOneCX').hasClass('show') ).即使您认为您不需要这样做，您仍然不能 100% 确定，因此最好编写一个更通用的解决方案，不需要您在将来进行任何更改。

如何让我的拨动开关工作？

How do I make my toggle switch work?

html

css

jquery

toggle

twitter-bootstrap