如何修改Divi站点jQuery代码将证言标签悬停触发改为点击触发

修改步骤 #

你只需要修改jQuery代码里的事件绑定部分即可，具体调整如下：

1. jQuery代码修改

把原来绑定的hover事件替换为click事件即可，修改后的完整jQuery代码如下：

jQuery(function($){
$(document).ready(function(){
 
$('#testimonial-person-1').addClass('testimonial-active');
 
// 把原来的.hover替换为.click
$('[id*="testimonial-person"]').click(function() {
 
var $selector = $(this).attr('id').replace('person', 'copy');
var $testimonial = $('#' + $selector);
 
$('[id*="testimonial-copy"]').removeClass('show-testimonial');
$testimonial.addClass('show-testimonial');
 
$('[id*="testimonial-person"]').removeClass('testimonial-active');
$(this).addClass('testimonial-active');
 
});
 
});
});

你要改的就是原来代码里的.hover这一处，其他逻辑完全不用动，功能就会从悬停触发变成点击触发。

2. 可选CSS优化（建议调整）

原来的CSS里给blurb元素设置的光标是context-menu，不符合点击交互的常规视觉反馈，你可以把对应代码里的cursor: context-menu;改成cursor: pointer;，用户 hover 到可点击的名称上时会显示手型光标，交互体验更友好。

修改后的对应CSS片段如下：

[id*="testimonial-person"]{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
/* 把context-menu改成pointer */
cursor: pointer;
}

内容的提问来源于stack exchange，提问作者Michael Owen