Materialize CSS中如何设置Tap Target显示2秒后关闭及调整尺寸

嘿Jagan，很高兴能帮你搞定Materialize CSS里Tap Target的这两个需求！下面分两部分给你详细解答：

你已经掌握了手动控制开关的方法，要实现自动关闭其实非常简单——借助JavaScript的setTimeout()定时器，在打开Tap Target之后，延迟指定时长（这里是2000毫秒=2秒）调用关闭方法就可以了。

具体代码示例如下：

// 先打开Tap Target
$('.tap-target').tapTarget('open');

// 延迟2秒后自动执行关闭操作
setTimeout(function() {
  $('.tap-target').tapTarget('close');
}, 2000);

原理就是setTimeout()会在你指定的毫秒数后执行传入的回调函数，完美匹配自动关闭的场景。如果需要调整时长，直接修改第二个参数的数值就行（比如改成3000就是3秒）。

Materialize的Tap Target默认样式是固定的，但你可以通过自定义CSS轻松覆盖它的默认尺寸，主要需要调整两个核心元素的样式：

• .tap-target-wrapper：Tap Target的外层容器，控制整体的最大显示范围
• .tap-target：Tap Target的圆形主体部分

给你一个自定义尺寸的CSS示例：

/* 调整外层容器的最大宽度，避免Tap Target超出屏幕范围 */
.tap-target-wrapper {
  max-width: 600px; /* 你可以根据需求自由修改这个值 */
}

/* 调整Tap Target圆形主体的大小 */
.tap-target {
  width: 550px;
  height: 550px;
}

/* 如果需要适配调整后的尺寸，可修改内部内容的内边距 */
.tap-target-content {
  padding: 2rem;
}

把这段CSS加到你的样式文件里，就能覆盖默认尺寸了。如果你的Tap Target有特定ID，也可以用ID选择器来精准控制单个Tap Target的样式，避免影响页面上的其他同类元素。

内容的提问来源于stack exchange，提问作者Jagan