Как сделать аккордеон разворачиваться на зависании, а не на клике с использованием рамки materializecss

Как сделать аккордеон разворачиваться при наведении курсора, а не на клик с использованием рамки materializecss (http://materializecss.com/collapsible.html)?Как сделать аккордеон разворачиваться на зависании, а не на клике с использованием рамки materializecss

Использование этого кода аккордеона расширяется только при нажатии, но не при наведении указателя мыши.

<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>

источник

2016-10-05 Lukas Navickas

Вы можете использовать JavaScript, чтобы вызвать щелчок на парении. –

Я попробовал это, используя: $ ("#hoverOnIt") .mouseover (function() { $ (this) .trigger ('click'); }); но это не сработало. У вас есть идея, как я могу его использовать? (Кстати, я использую MeteorJS) –

Использование 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>

источник

2016-10-06 07:59:36

Как сделать аккордеон разворачиваться на зависании, а не на клике с использованием рамки materializecss

ответ

Смежные вопросы