WordPress使用Beaver Builder如何实现整行可点击并兼容移动端？

数据老陈

2026-10-4

WordPress + Beaver Builder 整行点击跳转兼容方案

原有代码问题

点击事件被嵌套在mouseleave事件的回调函数中，只有触发鼠标离开元素的操作后才会绑定点击事件，本身逻辑存在缺陷
完全依赖桌面端专属的鼠标交互事件，移动端不存在mouseenter、mouseleave的触发逻辑，因此点击事件完全不会被绑定，导致移动端失效

实现步骤

1. 配置可点击行属性

在Beaver Builder编辑器中打开需要设置跳转的行设置，切换到「高级」标签：

自定义CSS类输入：clickable-row
在自定义属性区域新增一条属性，属性名填data-target-url，属性值填对应页面的相对路径，比如despre页面填/despre、servicii页面填/servicii即可，无需填写完整域名

2. 替换JS代码

你可以直接删除原有额外引入的jQuery CDN代码，WordPress默认已加载jQuery，重复加载易引发冲突。
将下方代码添加到Beaver Builder全局自定义JS区域，或WordPress主题自定义JS配置项，或页脚自定义HTML模块的<script>标签内即可：

jQuery(function($) {
  const $clickableRows = $('.clickable-row');
  // 设置鼠标指针样式
  $clickableRows.css('cursor', 'pointer');
  // 桌面端hover透明度效果
  $clickableRows.on('mouseenter', function() {
    $(this).css('opacity', '0.75');
  }).on('mouseleave', function() {
    $(this).css('opacity', '1');
  });
  // 同时兼容桌面端点击、移动端触摸跳转
  $clickableRows.on('click touchstart', function(e) {
    e.preventDefault();
    e.stopPropagation();
    const targetUrl = $(this).data('target-url');
    if (targetUrl) {
      window.location.href = targetUrl;
    }
  });
});