如何在 Materialize.css 中删除可折叠 div/li 的边框

Question

>我正在尝试在集合列表项中创建可折叠对象。但我不希望可折叠div 的灰色边框在这个可折叠的div 中可见。

标记：

<li class="collection-item">
<ul class="collapsible" data-collapsible="accordion">
<li>
<div class="collapsible-header">First</div>
<div class="collapsible-body">Lorem ipsum dolor sit amet.</div>
</li>  
</ul>
</li>

CSS：

.collapsible-header, .collapsible-body, .collapsible, ul.collapsible>li 
{
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
padding: 0rem !important;
border-top: 0px!important;
border-right: 0px!important;
border-left: 0px!important;
border-bottom: 0px!important;
box-shadow: 0px;
background: #fff;
}

Answer 1

使用此 CSSbox-shadow: none!important;

.collapsible-header, .collapsible-body, .collapsible, ul.collapsible>li 
{
margin: 0!important;;
padding: 0!important;
border: 0!important;
box-shadow: none!important;
background: #fff;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css" rel="stylesheet"/>
<li class="collection-item">
<ul class="collapsible" data-collapsible="accordion">
<li>
<div class="collapsible-header">First</div>
<div class="collapsible-body">Lorem ipsum dolor sit amet.</div>
</li>  
</ul>
</li>

Answer 2

.collapsible {

box-shadow: none;!important
}
.collapsible-header {
border: none;!important
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet"/>
<li class="collection-item">
<ul class="collapsible" data-collapsible="accordion">
<li>
<div class="collapsible-header">First</div>
<div class="collapsible-body">Lorem ipsum dolor sit amet.</div>
</li>
</ul>