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

Question

In one of my function I am hiding the parent unordered list at the beginning of page load and based on certain condition I am showing one of the list element under the hidden parent ul. However, the below code is not working. Using below mentioned function <ul id="menu"> is hidden completely and I am not able to populate the respective li elements.

HTML mark up

<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>

This is my function

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

First of all, you can not show child elements if the parent element is hidden. You need to hide all the li s except the specific one. You can use .not() method for that.

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

Answer 2

you don't need to hide ul. you should hide li except you want to show li. like this

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