如果移动设备，jquery mobile 崩溃答案

【问题标题】：jquery mobile collapse if mobile device如果移动设备，jquery mobile 崩溃
【发布时间】：2014-04-03 16:52:06
【问题描述】：

我有一个基于 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>

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

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

【问题讨论】：

jQM 的哪个版本？
试试 -- $( ".mobileHide" ).children().trigger( "collapse" ); --- 并扩展 --- 并使用 javascript 方式在收到警报时进行检测 --- if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {跨度>
对于 1.4.x：jsfiddle.net/ezanker/suPc7，对于 1.3：jsfiddle.net/ezanker/suPc7/1。使用窗口宽度的工作演示
嘿抱歉耽搁了，我没有刷新页面所以我没有看到回复（哦！）。它是 1.0 版...我过去开始更新它，但我已经在它上面构建了这么多东西，太多东西停止正常工作我只是决定坚持使用 1.0，直到我准备好进行完全重建（之后这个版本已经完成了它的工作）。
谢谢大家。 @ezanker，我使用了您的 1.3 jsfiddle 中的代码，它可以工作！谢谢！我没有看到将其标记为正确答案的选项，是否需要将其列为答案而不是评论？

标签： javascript jquery-mobile mobile

【解决方案1】：

这是一个有效的DEMO

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

$(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" );
    }
}

【讨论】：