Question

我有一个菜单下拉菜单：

<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>

Answer 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;
        }
    });
});

Answer 2

您可以尝试这种超时组合

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>

Answer 3

此代码有效。谢谢大家

if ($(window).width() < 768) {
  $(".navbar a").on('click', function (e) {
    e.preventDefault();
    $(this).on('click', function (e) {
      window.location = this.href;
    });
  });
}

禁用点击并启用双击移动设备

3 个答案: