Materialize CSS:如何防止可折叠的默认行为

Materialize CSS: How to prevent default behaviour for Collapsibles?

本文关键字：默认 可折叠 何防止 CSS Materialize      更新时间：2023-09-26

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

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

还有其他想法吗?

关闭事件处理程序。设置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');

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

修改选择器以操作特定的折叠项

我这样做的方式是根本不初始化可折叠，并手动控制何时显示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

相关文章：