如何使我的javascript代码响应？

Question

如何告知简单的jquery代码以激活对.filter_btn的单击

只有当我在移动或平板电脑时(最大宽度:768‘m)

而不是在桌面上？

<script>

document.addEventListener('DOMContentLoaded', function() {

jQuery(function($){

$('.filter_btn').click(function(event){

$('.content_filter').slideToggle('250','swing','hide');

});
});
});

</script>

<style>
    
  @media all and (max-width: 768px)
{
    .content_filter {
    display:none;
}
} 
    
</style>

如您所见，我可以在桌面模式下单击。

​

​

Answer 1

可以使用window.innerWidth属性验证窗口的宽度。类似于：

<script>

document.addEventListener('DOMContentLoaded', function() {

    jQuery(function($){

        $('.filter_btn').click(function(event){
            //Here we validate the size of the window, I've had this act wonky
            //before, so you may have to adjust the value
            if(window.innerWidth <= 768) {
                $('.content_filter').slideToggle('250','swing','hide');
            }
        });
    });
});
</script>

Answer 2

您已经设置了一个媒体查询以在指定的屏幕大小上隐藏内容，但是您正在隐藏. content。如果不希望单击.filter_btn，请隐藏它。

如果您仍然希望标题是可见的，那么有两个版本的标题:一个是为可点击的小屏幕显示的，另一个是显示在大屏幕上且不可点击的。