Question

在Laravel中使用Materialise CSS，并根据某些情况我希望能够禁用＆＃34;可折叠＆＃34;元素，就像你可以轻松地使用＆＃34; Tabs＆＃34;通过添加＆＃34;禁用＆＃34;如果你需要，例如：

<li @if(count($devices) == 0) class="tab col s4 disabled" @else class="tab col s4" @endif><a href="#mydevices">My Devices</a></li>

标签元素：MaterializeCSS Tabs

可折叠元素：MaterializeCSS Collapsible

但这对可折叠元素不起作用。解决方法只是隐藏整个元素，但是禁用会向用户显示他们可能会到达的地方等等。

所以这就是我试图禁用的地方：

<div @if(count($devices) == 0) class="collapsible-header disabled" @else class="collapsible-header" @endif>My Devices</div>

赞赏的想法/想法：）

Answer 1

我不是＆＃34; Laravel＆＃34;但我可以为你提出以下HTML / JS / CSS解决方案：

<ul class="collapsible" data-collapsible="accordion">
    <li class="disabled">
      <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
      <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
      <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
      <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
    </li>
 </ul>

CSS：

.collapsible li.disabled .collapsible-body {
    display: none !important; /*or using id of the app to avoid the use of !important*/
}

.collapsible li.disabled .collapsible-header {
    background: rgb(221,221,221);
}

物化css可折叠使禁用

1 个答案: