我有一个菜单下拉菜单:
<ul class="navbar">
<li>
<a href="">Link</a>
<ul>
<li>
<a href="">Link 2</a>
<ul>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
</ul>
</li>
</ul>
</li>
</ul>
问题在于,在移动设备上,单击该子菜单不会立即重定向您。
所以我想在移动设备上点击触发悬停,并在移动设备上双击触发重定向。
我已经尝试过了:
if ($(window).width() < 768) {
$(".navbar a").on('doubletap', function () {
window.location = this.href;
console.log('d');
});
$(".navbar a").on('click', function (e) {
e.preventDefault();
});
}
但是现在preventDefault()函数覆盖了doubletap函数。
我需要一些帮助,没有可以帮助我的话题
body {
margin:0;
padding:0;
}
.navbar, .navbar ul {
background:#2D7D9A;
list-style: none;
height:50px;
margin:0;padding:0;
z-index:2;
font-family:Verdana, Geneva, Tahoma, sans-serif;
}
.navbar li {
height:50px;
float:left;
line-height:50px;
padding:0 10px;
}
.navbar li ul {
background:#0099BC;
position:absolute;
margin:0;
padding:0;
left:0;
width:100%;
display:none;
}
.navbar li ul li {
display:inline;
}
.navbar li ul li ul {
background:#038387;
width:100%;
/* left:5%; */
top:45px;
}
.navbar li a {
color:#bfffff;
text-decoration:none;
}
.navbar li a:hover {
color:white;
text-shadow:1px 1px 10px #bfffff;
}
.navbar li:hover > ul {
display:block;
}
.navbar li ul li:hover > ul {
display:block;
}
<ul class="navbar">
<li>
<a href="">Link</a>
<ul>
<li>
<a href="">Link 2</a>
<ul>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
</ul>
</li>
</ul>
</li>
</ul>
答案 0 :(得分:1)
实际上,您使用的是错误的方式。首先,您必须在单击时调用此函数,然后才能检查设备宽度。检查出来我的代码。希望这段代码对您有用。谢谢。
$(document).ready(function(){
$(".navbar a").click(function (e) {
e.preventDefault();
if ($(window).width() < 768) {
$(this).dblclick(function (e) {
window.location = this.href;
});
}
else{
window.location = this.href;
}
});
});
答案 1 :(得分:0)
您可以尝试这种超时组合
if ($(window).width() < 768) {
var DELAY = 700, clicks = 0, timer = null;
$(".navbar a").on("click", function(e){
clicks++; //count clicks
if(clicks === 1) {
e.preventDefault();
timer = setTimeout(function() {
alert("Single Click"); //perform single-click action
clicks = 0; //after action performed, reset counter
}, DELAY);
} else {
clearTimeout(timer); //prevent single-click action
alert("Double Click"); //perform double-click action
clicks = 0; //after action performed, reset counter
}
})
.on("dblclick", function(e){
window.location = this.href;
});
}
body {
margin:0;
padding:0;
}
.navbar, .navbar ul {
background:#2D7D9A;
list-style: none;
height:50px;
margin:0;padding:0;
z-index:2;
font-family:Verdana, Geneva, Tahoma, sans-serif;
}
.navbar li {
height:50px;
float:left;
line-height:50px;
padding:0 10px;
}
.navbar li ul {
background:#0099BC;
position:absolute;
margin:0;
padding:0;
left:0;
width:100%;
display:none;
}
.navbar li ul li {
display:inline;
}
.navbar li ul li ul {
background:#038387;
width:100%;
/* left:5%; */
top:45px;
}
.navbar li a {
color:#bfffff;
text-decoration:none;
}
.navbar li a:hover {
color:white;
text-shadow:1px 1px 10px #bfffff;
}
.navbar li:hover > ul {
display:block;
}
.navbar li ul li:hover > ul {
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navbar">
<li>
<a href="">Link</a>
<ul>
<li>
<a href="">Link 2</a>
<ul>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
</ul>
</li>
</ul>
</li>
</ul>
答案 2 :(得分:0)
此代码有效。谢谢大家
if ($(window).width() < 768) {
$(".navbar a").on('click', function (e) {
e.preventDefault();
$(this).on('click', function (e) {
window.location = this.href;
});
});
}