Question

我正在尝试在集合列表项中创建可折叠。但我不希望可折叠的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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

2 个答案: