物化CSS:如何防止可折叠的默认行为？

Question

我想为导入过程中的步骤使用Materialize CSS可折叠列表。下一步的详细信息仅在第一步完成时才可见，因此我希望在单击面板时禁用折叠面板，并在第一步完成时手动触发事件。

我试过onclick="return false;"，但它不工作。

还有其他想法吗？

Answer 1

关闭可折叠的事件处理程序。如果要使用默认游标，请将css属性“pointer-events”设置为“none”。

var $panel_headers = $('.collapsible').find('> li > .collapsible-header');
$('.collapsible').off('click.collapse', '.collapsible-header');
$panel_headers.off('click.collapse').css('pointer-events', 'none');

然后可以通过将“display”属性设置为“block”来显示面板；

$('.collapsible-body').css('display', 'block');

此示例适用于要演示的页面上的所有可折叠项。

修改选择器以操作特定的可折叠对象。

Answer 2

我这样做的方式是根本不初始化可折叠的，并手动控制何时显示collapsible-body。

例如，您将如何使用开关(使用Vanilla JS)控制可折叠：

const addEmailCCSwitch = document.getElementById("add-email-cc-switch")
addEmailCCSwitch.addEventListener("click", (e) => {
  const isChecked = addEmailCCSwitch.querySelector('input').checked;
  if (isChecked) {
    document.querySelector('.collapsible-body').style.display = "block"
  } else {
    document.querySelector('.collapsible-body').style.display = "none"
  }
});

下面是一个包含函数示例的代码：https://codepen.io/dsudomoin/pen/zYBeYyW