首页 > 代码库 > 单击事件禁用，双击事件跳转
单击事件禁用，双击事件跳转
响应式网页设计：
在移动端的时候，通常导航菜单是双击跳转页面，单击事件只显示二级列表。
$("a").click(function() {
if(限制条件) {
if($(this).siblings("ul").length != 0) {
return false; //有二级菜单禁用跳转
}
}
});
$("a").dblclick(function() {
window.location.href = http://www.mamicode.com/$(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 = http://www.mamicode.com/$(this).attr("href");
});
});
});
</script>
</body>
</html>
单击事件禁用，双击事件跳转