javascript - 如何使用 materializecss 框架使 Accordion 在悬停时展开而不是在单击时展开

Question

如何使用 materializecss 框架 ( http://materializecss.com/collapsible.html ) 使 Accordion 在悬停时展开而不是在单击时展开？

使用此代码 Accordion 只会在点击时展开，不会在悬停时展开。

<ul class="collapsible" data-collapsible="accordion">
 <li>
  <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>
</ul>

Answer 1

使用 jQuery 的 mouseover(因为 materialize 已经使用 jQuery)触发点击确实有效，检查这个

$( ".collapsible div" ).mouseover(function() { $(this).trigger('click'); }); 

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.css" rel="stylesheet"/>

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
      
<ul class="collapsible" data-collapsible="accordion">
    <li>
      <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>