Jquery show hide在大屏幕上不能正常工作.而且在移动设备上完全不起作用
Jquery show hide not working properly on large screens. and not at all working on mobile devices
我正在使用显示和隐藏在鼠标单击时上下滑动菜单项。我有两个问题。显然他们工作得很好。但是当我做了一些认真的测试,一次又一次地点击每个父列表项时,我发现它们有点击问题,有时它们会展开,有时需要两次点击才能工作。这是我的第一个问题
第二个问题是它们根本不能在移动设备上工作
这里有一把小提琴小提琴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&loc_id=24"><span class="menu-title">Burlington Mall, MA</span></a>
</li>
<li class=" "><a href="index.php?route=common/location_details&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&loc_id=26"><span class="menu-title">Brunswick Square Mall, NJ</span></a>
</li>
<li class=" "><a href="index.php?route=common/location_details&loc_id=30"><span class="menu-title">Garden State Plaza, NJ</span></a>
</li>
<li class=" "><a href="index.php?route=common/location_details&loc_id=27"><span class="menu-title">Menlo Park Mall, NJ</span></a>
</li>
<li class=" "><a href="index.php?route=common/location_details&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&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&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&loc_id=32"><span class="menu-title">CrabTree Valley, NC</span></a>
</li>
<li class=" "><a href="index.php?route=common/location_details&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;
}
试试这个代码
$("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.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;
}
out of @media (min-width: 1200px),因为这个规则只适用于大于1200px的屏幕。你可能希望它适用于所有的屏幕尺寸,这样你的下拉菜单是隐藏的,当网站加载。event.preventDefault()可能存在一些问题;在移动浏览器上,所以我编辑了我的JSFiddle并添加了返回false;最后,它应该达到
相关文章:
- XMLHttpRequest在移动设备上的chrome上不起作用
- 下拉式父菜单链接在移动设备中不起作用
- 我的响应菜单在移动版中不起作用
- 未捕获的类型错误:无法设置属性'innerHTML'如果为null,则将脚本移动到正文不会;不起作用
- Angular js过滤器在某些移动设备上不起作用
- Jquery移动转换复选框在Jquery onclick函数()中第二次选中不起作用
- html视频javascript播放方法在移动Safari中不起作用
- HTML 不加载 CSS ,刷新后一切正常.同样在移动设备上,它在首次加载时不起作用
- 铬移动;导航.地理位置不起作用
- 移动导航菜单不起作用(HTML,CSS和JQuery)
- jQuery .play() 在移动 Safari 上不起作用
- overflow-x:隐藏在移动设备上不起作用
- 鼠标点击不会'不起作用,鼠标移动可以
- 在编译jquery移动代码时,Script标记在Eclipse Phonegap中不起作用
- I'我试图用一个按钮随意移动一个CSS元素,我试图使用偏移量,但onlick不起作用
- jQuery:jQuery.val()在移动Safari和Chrome中不起作用
- 在移动设备领域,空白:nowrap;溢出:隐藏;文本溢出:省略号;有点不起作用
- 第二个ajax请求在移动浏览器上不起作用
- 移动响应表单不起作用
- 在 Javascript 中使用 setTimeout 移动文本不起作用