Wordpress Elementor：在手風琴上展開/折疊 hover

Question

我正在使用帶有 elementor 插件的 wordpress。 雖然它提供了非常簡單的手風琴，可以在點擊時完美地工作，但我想在 hover 上展開/折疊手風琴。使用下面的 JQuery 它可以工作但不像點擊那樣干凈，因為它使用 CSS 所以沒有動畫/緩慢加載手風琴。 對 JS 很陌生，但有人可以幫助我復制單擊手風琴元素時發生的“動畫/緩慢加載”嗎？

工作 JQuery 不能很好地展開/折疊：

(function($){

  $('.elementor-tab-title').hover(function(){
    $(this).addClass("elementor-active", 10000 );
     $(this).parent().find('.elementor-tab-content').addClass("elementor-active", 10000 );
     $(this).parent().find('.elementor-tab-content').css({"display": "block"});
  }, function(){
    $(this).removeClass("elementor-active", 10000 );
    $(this).parent().find('.elementor-tab-content').removeClass("elementor-active",10000 );
    $(this).parent().find('.elementor-tab-content').css({"display": "none"});
  });

})(jQuery);

Answer 1

試試這個 jQuery

jQuery(document).ready(function($){ 
    
    $(".elementor-tab-content").fadeOut(0);
     $(".elementor-tab-title").hover(function() {
          $(".elementor-tab-content").not($(this).next()).slideUp('slow');
          $(this).next().slideToggle(400);
     });
    
});

或者，這個在鼠標懸停時展開，只能通過單擊折疊

jQuery(document).ready(function($){ 
     $('.elementor-tab-title').mouseover(function(){
    $(this).addClass("elementor-active", 10000 );
     $(this).parent().find('.elementor-tab-content').addClass("elementor-active", 10000 );
     $(this).parent().find('.elementor-tab-content').stop().slideDown("fast");

  });
});