如何在materialize.css中刪除可摺疊div/li的邊框

Question

我正嘗試在集合列表項中創建可摺疊的div/li。但我不希望可摺疊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

使用這個CSS box-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>