我有一个非常简单的 jQuery 下拉菜单,其中的链接采用通常的 ul/li 列表排列方式。下拉菜单的代码如下:
$('body').ready(function() {
if(screen.width <= 720) {
$('.dropdown').hover(function() { $(this).find('.subMenu').toggle(); });
$('.dropdown').click(function() { if( $('this').css('display') != 'none') {
$('this').toggle();
}
});
}
else
{
$('.dropdown').hover(
function() { $(this).stop(true,true).find('.subMenu').slideDown("fast"); },
function() { $(this).stop(true,true).find('.subMenu').hide(); }
);
}
});
在移动设备上(忽略720宽度,目前仅用于测试),我想实现以下功能:
用户点击带有下拉菜单的链接 > 如果菜单已打开,请将其关闭
用户在另一个菜单已打开时点击链接 > 关闭上一个菜单,打开当前菜单
- 用户点击页面上的其他位置 > 关闭所有打开的菜单
我发现悬停函数实际上可以处理 #2 和 #3,但我不知道如何让 #1 工作。我相当确定我知道为什么要进行这种特殊的尝试
$('.dropdown').click(function() { if( $('this').css('display') != 'none') {
$('this').toggle();
}
});
失败。我猜测单击(或点击,在本例中)会触发悬停事件,该事件似乎优先,因此显示菜单,而不是隐藏它。
如何在移动设备上实现此功能?
编辑:我正在使用 jQuery v1.7.2
HTML 列表结构如下,以防对某人有帮助(删节版):
<div id="navbar">
<ul>
<li class="dropdown"><a href="#">Link A</a></li>
<li class="dropdown"><a href="#">Link B</a>
<ul class="subMenu">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</li>
</ul>
</div>
最佳答案
如果您使用 jq 1.7+,请在此处尝试此演示 http://jsfiddle.net/SCN5T/3/
$(function(){
$(document).mousedown(function(){
$('.dropdown .active').removeClass('active').children('ul').hide();
})
$('.dropdown').on('mousedown','.subMenu', function(e){
e.stopPropagation();
var elem = $(this);
if(elem.is('.active')) {
elem.children('ul').slideUp(150);
elem.removeClass('active');
} else {
$('.dropdown .active').removeClass('active').children('ul').hide();
elem.addClass('active').children('ul').slideDown(150);
}
});
$('.subMenu').on('mousedown','ul', function(e){
e.stopPropagation();
alert('menu item clicked');
});
})
关于javascript - 单击以关闭移动设备上的 jQuery 下拉菜单,同时保留其他行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10811556/