如何切换可以展开或折叠的Kendo UI PanelBar上的复选框？

Question

我正在尝试使用几个可扩展选项创建一个面板栏，每个级别都有复选框。我遇到的问题是，如果您单击属于可扩展面板的复选框，则复选框不会切换。以下是显示问题的简化示例。在下面的示例中，无法切换 Main 1

的复选框

＆＃13;

＆＃13;

const panelBarTemplate = `
    <span class='k-state-default'>
        <span>#: item.text #</span>
        <input type='checkbox'
            id=#: item.id #
            class='k-checkbox'
            # if (item.isVisible) { #checked='checked'# } # />
        # var ItemCheckboxLabelClass = "k-checkbox-label" #
        # if (item.items) { ItemCheckboxLabelClass = "k-checkbox-label expandable-item" } #
        <label class="#: ItemCheckboxLabelClass #" for=#: item.id # />
    </span>
`;

var canExpandCollapse = true;

$('#side-bar-panel').kendoPanelBar({
  template: panelBarTemplate,
  dataSource: [{
    text: 'Main 1',
    id: 'Main1',
    isVisible: true,
    expanded: true,
    items: [{
      text: 'Sub 1',
      id: 'Sub1',
      isVisible: true
    }, {
      text: 'Sub 2',
      id: 'Sub2',
      isVisible: false
    }]
  }],
  dataBound: function() {
    $('.expandable-item').click(function() {
      canExpandCollapse = false;
    });
  },
  expand: cancelExpandCollapse,
  collapse: cancelExpandCollapse
});

function cancelExpandCollapse(e) {
  if (!canExpandCollapse) {
    e.preventDefault();
    canExpandCollapse = true;
  }
}

＆＃13;

<link href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.flat.min.css" rel="stylesheet" />
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
<ul id="side-bar-panel">
</ul>

＆＃13;

＆＃13;

＆＃13;

我在点击https://stackoverflow.com/a/31879672/4708150复选框时找到了防止展开和折叠的解决方案，但即使禁用了展开和折叠，复选框仍未切换。

Answer 1

我只是不使用复选框就能找到解决方法。我没有使用复选框，而是使用了Kendo移动开关，并且能够切换到切换，面板栏不会展开或折叠。

以下是修改后的代码段。更改的项目是panelBarTemplate，dataBound配置中的功能以及Kendo mobile的css文件已添加。

＆＃13;

＆＃13;

const panelBarTemplate = `
    <div>
        <span>#: item.text #</span>
        <input type='checkbox'
            id=#: item.id #
            # var ItemCheckboxClass = "my-checkbox" #
            # if (item.items) { ItemCheckboxClass = "my-checkbox expandable-item" } #
            class="#= ItemCheckboxClass #"
            # if (item.isVisible) { #checked='checked'# } # />
    </div>
`;

var canExpandCollapse = true;

$('#side-bar-panel').kendoPanelBar({
  template: panelBarTemplate,
  dataSource: [{
    text: 'Main 1',
    id: 'Main1',
    isVisible: true,
    expanded: true,
    items: [{
      text: 'Sub 1',
      id: 'Sub1',
      isVisible: true
    }, {
      text: 'Sub 2',
      id: 'Sub2',
      isVisible: false
    }]
  }],
  dataBound: function() {
    //initialize mobile switch if not already initialized.
    $('.my-checkbox').each(function(index, item) {
      let mobileSwitch = $(item);
      let mobileSwitchData = mobileSwitch.data('kendoMobileSwitch');
      if (!mobileSwitchData) {
        mobileSwitch.kendoMobileSwitch();
      }
    });

    //disable expanding and collapsing when clicking on a mobile switch
    //that is attached to an expandable panel.
    $('.expandable-item').siblings('.k-switch-container').click(function() {
      canExpandCollapse = false;
    });
  },
  expand: cancelExpandCollapse,
  collapse: cancelExpandCollapse
});

function cancelExpandCollapse(e) {
  if (!canExpandCollapse) {
    e.preventDefault();
    canExpandCollapse = true;
  }
}

＆＃13;

<link href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.flat.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.flat.mobile.min.css" rel="stylesheet" />
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
<ul id="side-bar-panel">
</ul>

＆＃13;

＆＃13;

＆＃13;