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

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

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％确定，所以最好写一个更通用的解决方案，不需要你将来做任何改变。

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

2 个答案: