添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

在移动端的时候,通常导航菜单是双击跳转页面,单击事件只显示二级列表。

$("a").click(function() {
if(限制条件) {
if($(this).siblings("ul").length != 0) {
return false; //有二级菜单禁用跳转
}
}
});
$("a").dblclick(function() {
window.location.href = $(this).attr("href"); //双击跳转
});

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<style>
.menu {
display: none;
}
</style>
</head>

<body>
<ul class="main-menu">
<li>
<a href="http://www.baidu.com">一级菜单</a>
<ul class="menu">
<li>
<a href="http://www.weibo.com">二级菜单</a>
</li>
</ul>
</li>
<li>
<a href="http://www.baidu.com">一级菜单</a>
</li>
<li>
<a href="http://www.baidu.com">一级菜单</a>
</li>
<li>
<a href="http://www.baidu.com">一级菜单</a>
</li>
<li>
<a href="http://www.baidu.com">一级菜单</a>
<ul class="menu">
<li>
<a href="http://www.weibo.com">二级菜单</a>
</li>
</ul>
</li>

</ul>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(function() {
$('.main-menu').children("li").each(function() {
$(this).find("a").hover(function() {
$(this).siblings(".menu").show();
}, function() {
$(this).siblings(".menu").hide();
});
})

$('.main-menu').children("li").each(function() {
/*单击禁用*/
$(this).children("a").click(function() {
if($(window).width() <= 768) {
if($(this).siblings(".menu").length != 0) {
return false;
}
}
});
/*双击跳转*/
$(this).children("a").dblclick(function() {
window.location.href = $(this).attr("href");
});
});
});
</script>
</body>

</html>

模拟双击事件

var touchtime = new Date().getTime();

$("a").click(function(){

if( new Date().getTime() - touchtime < 500 ){

console.log("dblclick");

}else{

touchtime = new Date().getTime();

console.log("click");