javascript - Jquery 显示隐藏在大屏幕上无法正常工作。并且根本无法在移动设备上工作

Question

我使用显示和隐藏在鼠标单击时上下滑动菜单项。 我有 2 个问题。 显然他们工作得很好。但是，当我通过一次又一次单击每个父列表项进行一些认真的测试时，我发现它们存在单击问题，有时它们会展开，有时需要单击两次才能工作。 这是我的第一个问题。

第二个问题是它们根本无法在移动设备上运行。

这是一个 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

试试这个代码

$("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();
});