Question

我有一个基于JQuery Mobile构建的Web应用程序。我一直在寻找一种方法让某些div（其中data-role =“collapsible”）在移动设备上查看时会折叠，但如果在桌面浏览器上查看则会展开。

我知道有很多类似的问题，但我无法让任何这些解决方案起作用。这是我尝试过的。

div有一类mobileHide

<script type="text/javascript"> 
/*collapse non-crucial sections when viewed on mobile device*/
/* this works while resizing desktop browser, but can't resize mobile browser*/
$(window).on('resize', function(){
var w = $(window).width();
if(w >= 540 ) {
    $( ".mobileHide" ).trigger( "expand" );
}else{
    $( ".mobileHide" ).trigger( "collapse" );
}
});

/* Tried setting @media to make .hide-element {display:none} if screen size less than 540px (which worked in hiding that element) then set is_mobile to true. Also tried doing the same without the is_mobile and just using "if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) )"*/
$(window).resize(function() {
var is_mobile = false;

if( $('.hide-element').css('display')=='none' {
    is_mobile = true;       
}

if(!is_mobile) {
$( ".mobileHide" ).trigger( "expand" );
}else{
$( ".mobileHide" ).trigger( "collapse" );
}
});

/*Also tried this without being in a window.resize function. The alert works when viewed on mobile device, but the collapse and expand don't*/
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
  /*alert("I am mobile!");*/
  $( ".mobileHide" ).trigger( "collapse" );
} else {
 $( ".mobileHide" ).trigger( "expand" );
}
</script>

我没有同时运行所有这些，但我评论的每一件都是当时唯一活跃的部分。

了解为什么最后一个检测到移动设备并显示警报（当它没有被注释掉）但在检测到移动设备时不会触发崩溃的任何信息将非常感激！

Answer 1

这是一个有效的 DEMO

函数CollapsiblesOnSize()检查窗口宽度，然后折叠或展开类mobileHide的所有元素。然后，您可以在窗口调整大小，方向更改和jQM的pageshow上调用它：

$(document).on("pageinit", "#page1", function () {
    CollapsiblesOnSize();
    $(window).on("resize orientationchange", function(){
        CollapsiblesOnSize();
    });
});

function CollapsiblesOnSize(){
    var w = $(window).width();
    if(w >= 540 ) {
        $( ".mobileHide" ).trigger( "expand" );
    }else{
        $( ".mobileHide" ).trigger( "collapse" );
    }
}

移动设备jquery移动崩溃

1 个答案: