下面是在materialize css框架下制作的可折叠 Accordion 的代码片段。我试图在单击按钮时展开所有 Accordion 元素,并在单击另一个按钮时关闭所有 Accordion 。一次只有一个按钮可见。
我编写的 js 代码在单击按钮时没有显示任何错误,也没有显示我期望的任务。
如果有人可以指导如何在工作阶段实现这一点,我将非常感激。
$('.collapsible').collapsible();
function expandAll() {
$(".collapsible-header").addClass("active");
$(".collapsible").collapsible({
accordion: false
});
$("#expand").fadeOut();
$("#collapse").fadeIn();
}
function collapseAll() {
$(".collapsible-header").removeClass(function() {
return "active";
});
$("#expand").fadeIn();
$("#collapse").fadeOut();
$(".collapsible").collapsible({
accordion: true
});
$(".collapsible").collapsible({
accordion: false
});
}
.collapsible li.active i {
-ms-transform: rotate(180deg);
/* IE 9 */
-webkit-transform: rotate(180deg);
/* Chrome, Safari, Opera */
transform: rotate(180deg);
}
.rotate {
-moz-transition: all .3s linear;
-webkit-transition: all .3s linear;
transition: all .3s linear;
}
.collapsible-header i {
position: absolute;
right: 0px;
}
#collapse{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<a class="waves-effect waves-light btn" onClick="expandAll();" id="expand"><i class="material-icons left">fullscreen</i>Expand All</a>
<a class="waves-effect waves-light btn" onClick="collapseAll();" id="collapse"><i class="material-icons left">fullscreen_exit</i>Collapse All</a>
<ul class="collapsible">
<li>
<div class="collapsible-header">
First
<i class="material-icons rotate right">expand_more</i></div>
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
</li>
<li>
<div class="collapsible-header">Second
<i class="material-icons rotate right">expand_more</i>
</div>
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
</li>
<li>
<div class="collapsible-header">Third
<i class="material-icons rotate right">expand_more</i></div>
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
</li>
</ul>
最佳答案
您需要调用 Collapsible 的实例才能对其调用 .open()
或 .close()
。
您可以使用 Materialize 的 Collapsible.getInstance
函数来执行此操作。
将这些行添加到您的 closeAll()
和 openAll()
函数中:
var instance = M.Collapsible.getInstance($('.collapsible'));
instance.open()
var instance = M.Collapsible.getInstance($('.collapsible'));
instance.close()}
您也不需要将 Accordion 设置为 true 或 false,您可以删除这些行:
$(".collapsible").collapsible({ accordion: false });
您的代码的 CodeSandbox 工作演示以及工作 expandAll 和 closeAll!:https://codesandbox.io/s/mm9w7wl0l9
关于javascript - 全部展开并折叠所有可折叠 Accordion 具体化CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53063672/