Question

如何在使用materializecss框架（http://materializecss.com/collapsible.html）时使用悬停而不是点击进行手风琴扩展？

使用此代码手风琴会在点击时展开，但不会在悬停时展开。

<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（因为实现已使用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>

如何使用materializecss框架使手风琴扩展悬停而不是点击

1 个答案: