展开所有并折叠所有可折叠手风琴实现 css

Question

下面是在 materialize css 框架下制作的可折叠手风琴的代码片段。我试图在单击按钮时展开所有手风琴项目，并在单击另一个按钮时关闭所有手风琴。并且一次只有一个按钮保持可见。

我编写的 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>

Answer 1

您需要调用 Collapsible 的实例才能调用.open()或调用.close()它。

您可以使用 Materialize 的Collapsible.getInstance功能来做到这一点。将这些行添加到您的closeAll()和openAll()函数中：

var instance = M.Collapsible.getInstance($('.collapsible'));
instance.open()

var instance = M.Collapsible.getInstance($('.collapsible')); 
instance.close()}

您也不需要将手风琴设置为 true 或 false，您可以删除这些行：

$(".collapsible").collapsible({ accordion: false });

CodeSandbox 工作演示您的代码与工作 expandAll 和 closeAll！：https ://codesandbox.io/s/mm9w7wl0l9