在移动视图和平板电脑视图中使用我的显示/隐藏JQuery功能

Question

所以我试图使用我的显示隐藏功能的移动视图和平板电脑视图，但我不知道如何实现它。这是我的显示隐藏功能:

$(function() {
    $('h2 + p').hide();
    $('h2').click(function(e) {
        var para = $(this).next('p');
        para.toggle();
        if (para.css('display') == 'none') {
            $(this).css('background-image', 'url(images/arrow-r.png)');
        } else {
            $(this).css('background-image', 'url(images/arrow-down.png)');
        }
    })
    .css('cursor', 'pointer');
});

我想使用这个代码为我的标题2，但只在移动视图和平板电脑视图，因为我有一个视频隐藏，直到你点击标题。对如何实现它有什么想法吗?

从第一个答案，我现在有这个代码，但它似乎仍然不工作?

;

<script>
$(function () {
if($(window).width() < 768 ) {  
    $('h2 + p').hide();
    $('h2').click(function(e) {
        var para = $(this).next('p');
        para.toggle();
        if (para.css('display') == 'none') {
            $(this).css('background-image', 'url(images/arrow-r.png)');
        } else {
            $(this).css('background-image', 'url(images/arrow-down.png)');
        }
    })
           .css('cursor', 'pointer');   
});
</script>

Answer 1

确定断点，然后执行如下操作

$(function () {
if($(window).width() < 768 ) { // 768 represents break-point measure
// Do whatever you want here
}
});

768px通常涵盖Ipad(纵向)到其他小型设备。