javascript - 打开后实现可折叠的主体填充更改
问题描述
我想将物化可折叠主体填充更改为 3px。它起初可以工作,但如果您打开、关闭然后重新打开,可折叠填充将重置为默认值,不再是 3px。
你能告诉我如何防止这种情况吗?
这是一个显示问题的代码笔: https ://codepen.io/jbeausej/pen/yLyrOow
谢谢!
这是我的代码:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col s6 m6 l6 x6" >
<div class="col-content card-panel z-depth-2 round-small" style="padding-top: 15px;">
<ul class="collapsible">
<li>
<div class="collapsible-header" style="padding:4px 4px 4px 8px;">Collapsible title</div>
<div class="collapsible-body" style="padding:3px;"><span>Collapsible body content.</span></div>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.collapsible');
var instances = M.Collapsible.init(elems);
});
</script>
</html>
解决方案
代替内联样式,创建一个 CSS 规则:
.collapsible .collapsible-body{
padding:3px;
}
演示:https ://codepen.io/lotusgodkk/pen/JjoVXLX
当容器被动画打开或关闭时,内联样式被删除。
推荐阅读
- python - 如何在Python的循环中将不带单/双引号的字符串传递给另一个函数
- php - Zingchart 没有从 MariaDB 中提取数据
- php - 如何在 woocommerce 中更改 woocommerce-terms-and-conditions-checkbox-text div 的文本?
- ios - 将粒子从 Maya 导出到 SceneKit iOS
- python - SyntaxError 停止在脚本中验证 python 版本
- sql - 从 Athena 查询中的字典字符串中获取值
- idris - 为什么我不能使用匹配变量而不是变量值?
- javascript - 赛普拉斯 - 我如何获得只有部分名称的元素 ID
- reactjs - 带有功能组件的 ReactJS 中的表单处理
- python - 从scrapy中的href标签中提取完整的URL