我正在尝试设置一种手风琴,当悬停在上面时,隐藏的内容将部分扩展并显示出来 . 我正在尝试使用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));
});
});