jquery - 在移动 View 和平板电脑 View 中使用我的显示/隐藏 JQuery 函数

标签 jquery css html function dreamweaver

所以我正在尝试将我的显示隐藏功能用于移动 View 和平板电脑 View ,但我不确定如何实现它。这是我的显示隐藏功能:

$(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,但仅限于移动 View 和平板电脑 View ,因为我有一个隐藏视频,直到您单击标题。关于如何实现它有什么想法吗?

从第一个答案开始,我现在有了这段代码,但它似乎仍然无法正常工作? ;

<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>

最佳答案

决定一个断点然后做如下的事情

$(function () {

if($(window).width() < 768 ) { // 768 represents break-point measure

// Do whatever you want here

}

});

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

关于jquery - 在移动 View 和平板电脑 View 中使用我的显示/隐藏 JQuery 函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40551185/

相关文章:

html - 如何使这个下拉菜单出现在它下面的文本上方

javascript - 单击 "Yes"单选按钮时显示文本区域,默认情况下或单击 "No"单选按钮时保持隐藏状态

jquery - 醉在多个类

jQuery .change() 事件不会在键盘的选择列表上触发 : how can I override this?

php - 将表单输入附加到 Formdata 对象不起作用

jQuery Mobile 标题截断内容

html - 位置 :absolute 的 div 问题

html - 图像上的 CSS 框阴影

php - 如何摆脱主题窃取者?

html - 如何在非全屏时使背景图像 Bootstrap 响应