我正在尝试设置一种手风琴,当悬停在上面时,隐藏的内容将部分扩展并显示出来 . 我正在尝试使用jQuery ui手风琴来设置它,但没有太多的运气,有悬停扩展它 . 任何帮助,将不胜感激 .

HTML

<div id="accordion">
  <div class="project-header">
   <p class="year">2018</p>
   <h3>Project Title 1</h3>
   <i class="fas fa-arrow-down"></i>
  </div>
  <div class="project-container">
   <p>Lorem sit amet felis. Nunc leo leo, volutpat id tempor nec, vulputate eget nibh. In Curabitur consectetur varius purus ut facilisis.</p>
   <div class="project-bottom-bar">
    <button class='previous'>Previous</button>
    <button class='next'>Next</button>
   </div>
  </div>
<div class="project-header">
   <p class="year">2018</p>
   <h3>Project Title 1</h3>
   <i class="fas fa-arrow-down"></i>
  </div>
  <div class="project-container">
   <p>Lorem sit amet felis. Nunc leo leo, volutpat id tempor nec, vulputate eget nibh. In Curabitur consectetur varius purus ut facilisis.</p>
   <div class="project-bottom-bar">
    <button class='previous'>Previous</button>
    <button class='next'>Next</button>
   </div>
  </div>
</div>

JavaScript的

$(function() {
        $( "#accordion" ).accordion({
            header: ".project-header",
            heightStyle: "content",
            collapsible: true,
            active: false,
            activate: function( event, ui ) {
                $(this).toggleClass('active').find('i').toggleClass('fa-arrow-down fa-arrow-up')
                           .closest('dt').siblings('dt')
                           .removeClass('active').find('i')
                           .removeClass('fa-minus').addClass('fa-plus');
                if(!$.isEmptyObject(ui.newHeader.offset())) {
                    $('html:not(:animated), body:not(:animated)').animate({ scrollTop: ui.newHeader.offset().top }, 500);
                }
            }
        });

        $('#accordion button').click(function (e) {
            e.preventDefault();
            var delta = ($(this).is('.next') ? 1 : -1);
            $('#accordion').accordion('option', 'active', ($('#accordion').accordion('option', 'active') + delta));
        });
    });