Jquery show hide 在大屏幕上无法正常工作。并且根本不在移动设备上工作答案

【问题标题】：Jquery show hide not working properly on large screens. and not at all working on mobile devicesJquery show hide 在大屏幕上无法正常工作。并且根本不在移动设备上工作
【发布时间】：2015-10-12 06:36:36
【问题描述】：

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

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

这是一个小提琴 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;
}

【问题讨论】：

使用离子框架。这是构建混合应用程序的绝佳框架
@RandykaYudhistira 如何解决我当前的问题
我认为它与点击延迟有关。每个 html 组件在 android 上每次点击都有 300 毫秒的延迟，因为 android 需要知道用户是要滚动页面还是点击该项目
我已经在 3 种不同的移动浏览器上尝试过你的小提琴，并且效果很好，你能更具体一点吗？另一个问题是因为您必须首先从所有其他元素中删除活动类
@Boris 在我的网站上，此功能无法在移动设备上实现。这是我网站的链接。请查看位置菜单以查看此功能。 onhttps://ifixandrepair.com/finalUpGrade/ .. 如果我先删除类，则会出现一个新问题，如果我再次单击它，它将不会隐藏父 LI。要查看问题，请单击任何父 LI 两次，它将显示但不会隐藏。

标签： javascript android jquery html css

【解决方案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();
});

【讨论】：

此代码将解决我的两次单击问题，但它会引发另一个问题，即如果我再次单击它，它不会隐藏父 li。要查看问题，请单击任何父 LI 两次，它将显示但不会隐藏。

【解决方案2】：

首先你必须隐藏所有的下拉菜单，然后显示实际的下拉菜单

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

您更新的JSFiddle

关于移动问题

你必须移动它

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

超出@media (min-width: 1200px)，因为此规则仅适用于大于 1200px 的屏幕。您可能希望将其应用于所有屏幕尺寸，以便在加载网站时隐藏您的下拉菜单。 event.preventDefault(); 可能存在一些问题；在移动浏览器上，所以我编辑了我的 JSFiddle 并添加了 return false；到最后，它应该可以解决问题

【讨论】：

2 点击问题已解决。它工作正常。请详细说明你的答案。附言请帮助我，使其在移动设备上运行良好。
试着把“return false;”在您的 jQuery 函数末尾没有引号，它应该防止网站在单击菜单项时刷新并检查我编辑的答案
Boris 该问题已针对大屏幕修复，但在移动设备上，我猜它会重新加载页面并且无法正常工作。我已经应用了正确的 CSS，以便在所有屏幕中都不显示。这是我的网站ifixandrepair.com/finalUpGrade 的链接，它位于位置菜单中。请查看。
我在我的 js 头文件中包含了这个文件 (jquery-1.7.1.min.js)
我不确定问题出在哪里，您的功能根本没有在小屏幕上运行。试着把这个函数放到 $(document).ready(function(){}); $(document).ready() 中的函数会在页面加载后自动启动，您需要在用户单击菜单项时启动您的函数。但我不确定这是否导致问题