Question

在我的一个函数中，我在页面加载开始时隐藏了父无序列表，并且基于某些条件，我在隐藏的父元素ul下显示了一个列表元素。但是，以下代码无效。使用下面提到的函数<ul id="menu">是完全隐藏的，我无法填充相应的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>

这是我的功能

function deviceDetectionScript() {

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

    if (mobileDetection.mobile()) {

        $('ul#menu').hide();

        if (mobileDetection.os() == 'iOS') {
            $('ul#menu').find('li#mainMenuGroup_mobileiOS').show();
            show_tab_content('mobileiOS');
        }

        if (mobileDetection.os() == 'AndroidOS') {
            $('ul#menu').find('li#mainMenuGroup_mobileAndroid').show();
            show_tab_content('mobileAndroid');
        }

        if (mobileDetection.os() == 'WindowsMobileOS' || mobileDetection.os() == 'WindowsPhoneOS') {
            $('ul#menu').find('li#mainMenuGroup_mobileWinPhone').show();
            show_tab_content('mobileWinPhone');
        }

    } else {
        $('ul#menu').show();
    }
}

Answer 1

首先，如果隐藏了父元素，则无法显示子元素。您需要隐藏除特定值之外的所有li。您可以使用.not()方法。

 if (mobileDetection.mobile()) {
     if (mobileDetection.os() == 'iOS') {
         $('ul#menu').find("li").not('#mainMenuGroup_mobileiOS').hide();
         show_tab_content('mobileiOS');
     }

Answer 2

你不需要隐藏ul。除了你想要展示李，你应该隐藏李。像这样

$('#menu > li').not('#mainMenuGroup_table').hide();

当隐藏父级ul时，如何在li上使用jquery show（）

2 个答案: