jquery hide() 方法不适用于平板电脑/移动设备

Question

我有一个 JS 函数，它只显示一个 li 元素并隐藏所有其他 li 元素，这些 li 元素包含在基于设备检测条件的无序列表中。

HTML

<ul id="menu">
    <li id="mainMenuGroup_mostPopular"></li>
    <li id="mainMenuGroup_slots"></li>
    <li id="mainMenuGroup_table"></li>
    <li id="mainMenuGroup_roulette"></li>
    <li id="mainMenuGroup_poker"></li>
    <li id="mainMenuGroup_mobileiOS"></li>
    <li id="mainMenuGroup_mobileAndroid"></li>
    <li id="mainMenuGroup_mobileWinPhone"></li>
</ul>

JS

function deviceDetectionScript() {

    var mobileDetection = new MobileDetect(window.navigator.userAgent);

    if (mobileDetection.mobile()) {

        if (mobileDetection.os() == 'iOS') {
            alert('iOS detected'); //alert is working fine on ipad
            $('ul#menu > li').not('#mainMenuGroup_mobileiOS').hide(); // this is not working
            show_tab_content('mobileiOS'); // this function makes the selected li active - working fine
        } 
        else if (mobileDetection.os() == 'AndroidOS') {
            alert('Android detected'); //alert is working fine on android tab
            $('ul#menu > li').not('#mainMenuGroup_mobileAndroid').hide(); // this is not working
            show_tab_content('mobileAndroid'); // this function makes the selected li active - working fine
        } 
        else if (mobileDetection.os() == 'WindowsMobileOS' || mobileDetection.os() == 'WindowsPhoneOS') {
            alert('windows detected'); //alert is working fine on windows phone
            $('ul#menu > li').not('#mainMenuGroup_mobileWinPhone').hide(); // this is not working
            show_tab_content('mobileWinPhone'); // this function makes the selected li active - working fine
        }

    }
}

我尝试在循环内使用警报，并且检测与一个附加功能 show_tab_content('listID'); 一起工作正常，除了 jquery hide() 方法 $('ul#menu > li').not('#listID').hide(); 之外，所有这些似乎都工作正常。

我尝试添加 else 条件来检查它是否不是移动设备，并且脚本在桌面浏览器上运行良好。

function deviceDetectionScript() {

    var mobileDetection = new MobileDetect(window.navigator.userAgent);

    if (mobileDetection.mobile()) {

        if (mobileDetection.os() == 'iOS') {
            // Same as above
        } 
        else if (mobileDetection.os() == 'AndroidOS') {
            // Same as above
        } 
        else if (mobileDetection.os() == 'WindowsMobileOS' || mobileDetection.os() == 'WindowsPhoneOS') {
            // Same as above
        }

    }
  else {
        alert('Desktop detected'); //alert is working fine on desktop
        $('ul#menu > li').not('#mainMenuGroup_poker').hide(); // this is working fine on desktop
        show_tab_content('poker'); // this function makes the selected li active - working fine
  }
} 

我需要确保 hide() 方法也适用于手机/平板电脑吗？

Answer 1

我在处理移动设备时也遇到了一些问题。

你可以试试这个代码吗

$('ul#menu > li').not('#mainMenuGroup_poker').each(function(){
var unwanted_li = $(this);
unwanted_li[0].style.display = 'none';
});

我还没有测试过上面的代码，但我认为它会起作用。

要补充的是，不需要的_li 的零索引具有对象的 DOM 引用。

**** 确切的问题和解决方案 ****

经过长期调查，这就是无法在移动设备上运行的确切原因。

在这种情况下，两个函数并行工作。一个在 JS 开始执行时立即调用，另一个在 document.ready 上。

在这种情况下，document.ready 甚至在另一个函数停止工作之前就被调用了，因此这个函数没有可以隐藏的 li。

例如（已更改函数名称以对细节保密）

在第 1245 行

<script type="text/javascript">
    abc(false,true); // this is the function which was actually adding the li s
</script>

在第 1456 行

<script type="text/javascript">
    // Device detection
    $(document).ready(function() {
        hidingScript();
    });
</script>

因此，在上述情况下，hidingScript 甚至在 abc 停止加载 html 之前就开始执行。为了防止这种建议的改变是

<script type="text/javascript">
    // Device detection
    $(document).ready(function() {
        abc();
        hidingScript();
    });
</script>

**如果 abc 调用了一个 ajax 然后附加了 html，那么你需要在 ajax 调用成功的事件中调用 hidescript

此更改已经过验证并且运行良好。