我创建了以下函数:

//Toggle height of header-foto function
function height_toggler() {
    $('body').toggleClass('large-slider small-slider',500);
    $('#height-toggler').find('i').toggleClass('fa-rotate-270 fa-rotate-90');
}


我在用户单击按钮时调用此函数:

// bind the function to a click on the toggler
$('#height-toggler').click( function() {
    height_toggler();
});


这非常有效,您可以在this page上看到它

我的客户还希望此功能绑定在Bootstrap Carousel的slide event上,并且仅适用于高度为100%的轮播的页面。
我想出了以下代码,但是每次轮播幻灯片(据我了解)都会触发。如何使它仅在页面加载后在第一张幻灯片上触发?

if( $('body').hasClass('large-slider') ) { //only perform this on large sliders
    $('.carousel').on('slide.bs.carousel', function () {
        height_toggler();
    });
}

最佳答案

您可以使用one()方法。

if( $('body').hasClass('large-slider') ) { //only perform this on large sliders
  $('.carousel').one('slide.bs.carousel', function () {
    height_toggler();
  });
}

07-24 09:50
查看更多