jQuery Аккордеон - триггер наведения

Question

есть ли способ открыть этот аккордеон с помощью класса при наведении курсора? (например, ".accordion - hover" или data-on-hover)

Я попытался добавить класс .open при наведении, но у меня это не сработало.

Спасибо за любое решение.

https://vctrfrnndz.github.io/jquery-accordion/

<div data-accordion data-on-hover>
  <div data-control>Control</div>
  <div data-content>
    <div>Row</div>
    <div>Row</div>
    <div>Row</div>
  </div>
</div>

$('.accordion').accordion({
  "transitionSpeed": 400
});

Answer 1

Если вас устраивает индивидуальное решение, тогда go с ним, или если вы действительно хотите go с решением плагина, попробуйте запустить события открытия и закрытия плагина аккордеона, упомянутого в его документации.

События accordion.open срабатывает при открытии любого аккордеона

accordion.close срабатывает при закрытии любого аккордеона

Fire open событие на mouseEnter и fire close событие на mouseLeave

найдите мое собственное решение ниже, если это сработает для вас

$(document).ready(function(){
  $('.accordionHeader').on('mouseenter',function(){
    $(this).find('.accordionContent').slideDown();
  });
  $('.accordionHeader').on('mouseleave',function(){
    $(this).find('.accordionContent').slideUp();
  });
});

.accordionContent {
  display: none;
}
.accordionWrapper {margin-bottom: 50px;}
.accordionHeader {padding: 10px;border: 1px solid;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordionWrapper">
  <div class="accordionHeader">
    Hover Me
  <div class="accordionContent">
    Content Go here 
    <div>Row</div>
    <div>Row</div>
    <div>Row</div>
  </div>
  </div>
  
</div>
<div class="accordionWrapper">
  <div class="accordionHeader">
    Hover Me
  <div class="accordionContent">
    Content Go here 
    <div>Row</div>
    <div>Row</div>
    <div>Row</div>
  </div>
  </div>
  
</div>
<div class="accordionWrapper">
  <div class="accordionHeader">
    Hover Me
  <div class="accordionContent">
    Content Go here 
    <div>Row</div>
    <div>Row</div>
    <div>Row</div>
  </div>
  </div>
  
</div>