Question

我在 WordPress 页面的正文中使用下面的代码片段，该页面是使用页面构建器 Elementor 构建的。我正在使用 tabs 元素，我试图确保第一个选项卡在 768px 及以上打开但在 768px 及以下关闭。下面的脚本完美关闭了tab元素，但是一直关闭，我如何确保它只在768px及以下有效？

<script> 
jQuery(document).ready(function($) { 
var delay = 10; setTimeout(function() { 
$('.elementor-tab-title').removeClass('elementor-active');
 $('.elementor-tab-content').css('display', 'none'); }, delay); 
}); 
</script>

Answer 1

返回浏览器视口宽度 func([sha2::Sha256])

$( window ).width();

所以你喜欢这样：

if ( jQuery(window).width() <= 768 ){
    //do what ever
}

Answer 2

您可以计算视口宽度：

const vw = jQuery(window).width();

那么，

if(vw >= 768) {
   var delay = 10; setTimeout(function() { 
      $('.elementor-tab-title').removeClass('elementor-active');
      $('.elementor-tab-content').css('display', 'none'); }, delay); 
   }); 
}

Answer 3

在 Elementor，您可以通过 body 的数据属性获取设备类型（“移动”、“平板电脑”、“桌面”）：

jQuery( 'body' ).data( 'elementor-device-mode' )

使脚本仅在特定屏幕尺寸下工作

3 个答案: