Jquery hide()方法在平板电脑/手机上不工作

jquery hide() method is not working on tablet/mobile

本文关键字：手机 工作 平板电脑 hide 方法 Jquery      更新时间：2023-09-26

我有一个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()方法也适用于移动/平板电脑?

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

你能不能试试这个代码

$('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甚至在其他函数停止工作之前被调用，因此这个函数没有可以隐藏的空间。

例如(函数名已被更改以保密细节)

第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之前就开始执行了。为了防止这种情况，建议修改 
<script type="text/javascript">
    // Device detection
    $(document).ready(function() {
        abc();
        hidingScript();
    });
</script>

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

相关文章：