Question

我想在导入过程中使用Materialize CSS可折叠列表来执行步骤。只有在第一步完成后才能看到下一步的详细信息，因此我想在单击时禁用折叠面板，并在第一步完成时手动触发事件。

我尝试了onclick="return false;"，但它无效。

还有其他想法吗？

Answer 1

Turn off the event handlers for the collapsible. Set css property 'pointer-events' to 'none' if you want the default cursor.

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

You can then display the panels by setting the 'display' property to 'block';

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

This example applies to all the collapsible items on your page to demonstrate.

Modify the selectors to manipulate specific collapsibles.

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"
  }
});

这是一个带有功能示例的Codepen：https://codepen.io/dsudomoin/pen/zYBeYyW

Materialise CSS：如何防止Collapsibles的默认行为？

2 个答案: