我该如何在第一次触摸时打开下拉列表，请按照第二个链接进行链接

我正在尝试获取一个下拉菜单以在基于触摸的设备上正确工作。单击时，菜单打开正常，但是由于父元素也是链接，因此在选择下拉列表之前将用户带到链接。

是否有办法进行操作，以便（仅在触摸设备上）父元素的第一个点击打开下拉列表，第二次点击将您带到链接？

我对HTML和CSS有很好的了解，但实际上没有JavaScript，因此，如果解决方案是基于脚本的，请尽可能描述性。

谢谢

看DoubleTaptogo：

"当您第一次点击父项目时，DoubleTaptogo防止浏览器打开新的URL，但如果连续再次轻拍。"

http://osvaldas.info/drop-down-navigation-responsive-and-posponsive-and-touch-frylyly

这可能会有所帮助。如果您有链接

<a href="#">your drop down menu</a>我的意思是将#添加到href

另外在JavaScript中这样做

var link = $('.menu').find('a');
$(document).on('touchstart', link, function (e) {
    e.preventDefault();
    //do your stuff
});

$('.has-sub').on("touchstart", function (e) {
 var submenu = $(this).find('ul').first();
 var link = $(this); //preselect the link
 if (link.hasClass('hover')) {
       link.removeClass('hover');
       $(submenu).slideUp(0);
       e.stopPropagation()
       return true;
 } else {
       $(submenu).slideDown(0);
       link.addClass('hover');
       e.stopPropagation();
       return false; //extra, and to make sure the function has consistent return points
 }

}）;

我的解决方案正在切换JavaScript中的HREF内容：

// JS
let dropdown = document.getElementsByClassName("dropdown")   
let droplink = document.getElementsByClassName("drop-link") 
//console.log(droplink[0].getAttribute('href')) to check code
for (let i = 0;i<dropdown.length;i++){ // if you have more than one dropdown
  dropdown[i].addEventListener('click', function(){
  // if dropdown is already displaying 
    if(dropdown[i].classList.contains('YourdisplayDropdownClass')){
      droplink[i].href = 'myhtmlpage.html'
    } else {
      droplink[i].href = '#'
      dropdown[i].classList.add('YourdisplayDropdownClass');
    }
  });
};

HTML中的结构

  <nav>
   <ul>
    <li class="dropdown"><a class="drop-link" ref="myhtmlpage.html">MyHTMLpage</a>
     <ul class="drop-menu">
      <li><a href="mysubpage1.html" class="drop-item">MySubpage1</a></li>
      <li><a href="mysubpage2.html" class="drop-item">MySubpage2</a></li>
     </ul>
    </li>
   </ul>
  </nav>

对于那些仍在寻找一种方法的人，我有一个解决方案：

首先，您可以通过检测主输入类型是pointer: coarse（https://stackoverflow.com/a/52855084）来检测设备是否为触摸屏

然后，如果设备是触摸设备，请计算单击链接的次数。在第一次单击时，请使用.preventDefault()防止默认行为，并且下拉次数应打开，但不应打开链接。在第二次点击中，不要抑制此行为，链接将打开。

因此，定义一个变量以跟踪计数，在单击链接上添加您的在链接中添加函数，并防止默认操作（如果是第一次单击）：

var dropdown_clicked = 0;
//for touchscreens, click 1 = open dropdown, click 2 = open link
$("#dropdown > a").on('click', function (e) {
  if(window.matchMedia("(pointer: coarse)").matches) {
  //pointer:coarse = touchscreen
    dropdown_clicked += 1;
    if (dropdown_clicked == 1){
      e.preventDefault();
    }
    if (dropdown_clicked == 2){
      dropdown_clicked = 0;
    }
  }

确保您的功能是在$(document).ready(function(){ });中定义的，因为此方法使用jQuery。

对于上下文，我有这样的方法可以在悬停上打开下拉菜单：

$("#dropdown").hover(function () {
//slideToggle = display or hide the matched elements with a sliding motion
//stop(true,true) stops the animation from repeating
$(this).find('ul').stop(true, true).slideToggle('medium');
});

和下拉html：

<ul>
    <li><a href="index.php">home</a></li>
    <li id="dropdown"><a href="page.php">my dropdown</a>
        <ul>
             <li>dropdown content</li>
             <li>dropdown content</li>
        </ul>
    </li>
</ul>

function createMenu(menuName,menuTitle,menuEntries,left,width) {
 numEntries = menuEntries.length;
document.write('<div class="menuTitle" style="left:0px; width:100px;"');
document.write('onMouseover="menuToggle('' + menuName + '');"');
document.write('onMouseout="menuToggle('' + menuName + '');">');
document.write(menuTitle);
document.write('</div>');
     document.write('<div id="myMenu" class="menu" style="left:0px; width:100px;"');
     document.write('onMouseout="menuToggle('' + menuName + '')">');
     for (i = 0; i < numEntries; i++) {
        document.write('<a href="' + menuEntries[i].url + '" class="menuEntry">' + menuEntries[i].entry + '</a><br>');
     }
     document.write('</div>');
}
  function menuToggle(target) {
     targetMenu = (document.getElementById) ? document.getElementById(target).style : eval("document." + target);
     targetMenu.top = (parseInt(targetMenu.top) == 22) ? -2000 : 22;
     }
  // -->
  </script>

这是JavaScript，用于创建一个下拉菜单，该下拉菜单在鼠标悬停在鼠标上时会掉落 - 它来自Arman Danesh的10个简单步骤或更少的简单步骤的书籍。他是一位伟大的作家，可能会比我更好地解释这一点 - 但是这里；

您正在做的是创建一个具有预定义变量的函数，如（）声明。线 Numentries ... 将变量数字的值设置为预定义变量菜单的长度。换句话说，（在此示例中，编程的条目数为三个，使numentries = 3）但是，您代码的许多条目是numentries的值。

document.write的内容看起来可能令人困惑，但它只是包含HTML代码的JavaScript代码，因为仅将DIV放置在其上会破坏程序，因为您将其放入脚本标签中。如果您在任何时候都不理解我，请问您以后再说我的教科书中有什么。

这是第一个功能，第二个功能是使鼠标悬停的菜单下拉菜单的原因。我不知道如何在不引用这本书的情况下向您解释这一点，但是如果您需要我解释一下，我会尝试的。如果您还需要显示菜单的HTML代码，我可以为您提供整个示例，我可以在计算机上。

希望这会有所帮助，请问您是否需要我遍历任何事情。我将继续研究如何为您更改触摸屏X

相关内容

最新更新

热门标签：