Question

我有一个JS函数，只显示一个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';
});

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

要添加，unwanted_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>

因此，在上面的情况下，即使在abc停止加载html之前，hiddenScript也开始执行。为了防止这种建议的改变是

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

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

此更改已经过验证，工作正常。

jquery hide（）方法无法在平板电脑/手机上运行

1 个答案: