jQuery show hide在大屏幕上无法正常工作。 而根本不在移动设备上工作

Question

I am using show and hide to slide up and down my menu items on mouse click. I have 2 issues in it. Apparently they are working fine. But when i did some serious testing by clicking every parent list item again and again i found that they have click issue , sometimes they expand and sometimes it takes two clicks to work. This is my first problem.

Second problem is that they are not working on mobile devices at all .

Here is a fiddle Fiddle

Html

<div class="mega-col col-xs-12 col-sm-12 col-md-4" data-type="menu">
<div class="mega-col-inner">
    <ul>
        <li class="parent dropdown-submenu mega-group"><a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="menu-title">Massachusetts Stores</span><b class="caret"></b></a>
            <div class="dropdown-mega level2">
                <div class="dropdown-menu-inner">
                    <div class="row">
                        <div class="col-sm-12 mega-col" data-colwidth="12" data-type="menu">
                            <div class="mega-col-inner">
                                <ul>
                                    <li class=" "><a href="index.php?route=common/location_details&amp;loc_id=24"><span class="menu-title">Burlington Mall, MA</span></a>
                                    </li>
                                    <li class=" "><a href="index.php?route=common/location_details&amp;loc_id=25"><span class="menu-title">Burlington Mall, MA - Cart</span></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li class="parent dropdown-submenu mega-group"><a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="menu-title">New Jersey Stores</span><b class="caret"></b></a>
            <div class="dropdown-mega level2">
                <div class="dropdown-menu-inner">
                    <div class="row">
                        <div class="col-sm-12 mega-col" data-colwidth="12" data-type="menu">
                            <div class="mega-col-inner">
                                <ul>
                                    <li class=" "><a href="index.php?route=common/location_details&amp;loc_id=26"><span class="menu-title">Brunswick Square Mall, NJ</span></a>
                                    </li>
                                    <li class=" "><a href="index.php?route=common/location_details&amp;loc_id=30"><span class="menu-title">Garden State Plaza, NJ</span></a>
                                    </li>
                                    <li class=" "><a href="index.php?route=common/location_details&amp;loc_id=27"><span class="menu-title">Menlo Park Mall, NJ</span></a>
                                    </li>
                                    <li class=" "><a href="index.php?route=common/location_details&amp;loc_id=29"><span class="menu-title">Ocean County Mall, NJ</span></a>
                                    </li>
                                    <li class=" "><a href=""><span class="menu-title">Rockaway Townsquare, NJ</span></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li class="parent dropdown-submenu mega-group"><a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="menu-title">New York Stores</span><b class="caret"></b></a>
            <div class="dropdown-mega level2">
                <div class="dropdown-menu-inner">
                    <div class="row">
                        <div class="col-sm-12 mega-col" data-colwidth="12" data-type="menu">
                            <div class="mega-col-inner">
                                <ul>
                                    <li class=" "><a href="index.php?route=common/location_details&amp;loc_id=31"><span class="menu-title">Galleria at White Plains, NY</span></a>
                                    </li>
                                    <li class=" "><a href="index.php?route=common/location_details&amp;loc_id=42"><span class="menu-title">Manhattan, NY-Toys 'R' Us </span></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li class="parent dropdown-submenu mega-group"><a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="menu-title">North Carolina Stores</span><b class="caret"></b></a>
            <div class="dropdown-mega level2">
                <div class="dropdown-menu-inner">
                    <div class="row">
                        <div class="col-sm-12 mega-col" data-colwidth="12" data-type="menu">
                            <div class="mega-col-inner">
                                <ul>
                                    <li class=" "><a href="index.php?route=common/location_details&amp;loc_id=32"><span class="menu-title">CrabTree Valley, NC</span></a>
                                    </li>
                                    <li class=" "><a href="index.php?route=common/location_details&amp;loc_id=2"><span class="menu-title">Fayetteville, NC</span></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>

JS:

  $("li.parent.dropdown-submenu.mega-group > a").on('click', function(event) {
event.preventDefault();
$(this).toggleClass('active');
$('.dropdown-mega.level2').hide();
if($(this).hasClass('active'))
    $(this).closest('.parent').find('.dropdown-mega.level2').show();
});

Css

li.parent.dropdown-submenu.mega-group .dropdown-mega.level2 {
display: none;
}
li
 {
padding:10px;
position: relative;
margin:auto;
}

Answer 1

Try this code

$("li.parent.dropdown-submenu.mega-group > a").on('click', function(event) {
    $('.dropdown-mega.level2').hide();
    $('li.parent.dropdown-submenu.mega-group > a').removeClass("active")
    $(this).toggleClass('active');
    $(this).closest('.parent').find('.dropdown-mega.level2').show();
});

Answer 2

First you have to hide all dropdowns, then show actual dropdown

$("li.parent.dropdown-submenu.mega-group > a").on('click', function(event) {
    event.preventDefault();
    $('.dropdown-mega.level2').hide();
    if($(this).hasClass('active')) {
        $(this).removeClass('active');
    } else {
        $("li.parent.dropdown-submenu.mega-group > a").removeClass('active');
        $(this).addClass('active');
        $(this).closest('.parent').find('.dropdown-mega.level2').show();
    }
    return false;
});

Your updated JSFiddle

and about that mobile issue

you have to move this

#li_menu169 li.parent.dropdown-submenu.mega-group .dropdown-mega.level2 {
    display: none;
}

out of @media (min-width: 1200px), because this rule will apply only to screens bigger than 1200px. You probably want it to be applied to all screen sizes so your dropdown is hidden when website is loaded. And there is probably some problem with event.preventDefault(); on mobile browser so I've edited my JSFiddle and added return false; to the end, it should do the trick