在 Laravel 中使用 Materialize CSS,并且根据某些情况,我希望能够禁用“可折叠”元素,就像您可以在需要时通过添加“禁用”类轻松使用“选项卡”一样,例如:
<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>
想法/想法表示赞赏:)
最佳答案
我不是“Laravel”专家,但我可以向您推荐以下 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);
}
关于javascript - Materialize css collapsible make 禁用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36221256/