Question

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

有没有办法让它（只在触摸设备上）第一次点击父元素打开下拉列表，第二次点击会带你到链接？

我非常了解HTML和CSS，但没有真正的javascript，所以如果解决方案是基于脚本的，请尽可能描述。

由于

Answer 1

看看DoubleTapToGo：

“当您第一次点击父项时，DoubleTapToGo会阻止浏览器打开新网址，但如果连续再次点击，则允许浏览器。”

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

Answer 2

这可能会有所帮助。如果你有一个链接

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

Answer 3

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的一本名为 JavaScript in 10 Simple Steps or Less 的书。他是一个伟大的作家，可能会比我更好地解释这一点 - 但是这里有了;

您正在做的是使用（）中声明的预定义变量创建函数。 numEntries ... 行将变量numEntries的值设置为预定义变量menuEntries的长度。换句话说，（在此示例中，编程的条目数为3，使numEntries = 3）但是，您编码的条目数是numEntries的值。

document.write的东西可能看起来很混乱，但它只是包含HTML代码的javascript代码，因为只要将div放在它自己的上就会破坏程序，因为你把它放在脚本标签中。如果你在任何时候都不理解我，我会告诉你教科书里的内容，我以后会把它拿到教室里。

这是第一个处理的功能，第二个是鼠标悬停菜单下拉菜单的原因。我不知道如何在没有引用这本书的情况下向你清楚地解释这一点，但如果你需要我解释它，我会试试。如果你需要用于显示菜单的HTML代码，我可以给你整个例子，我把它放在我的电脑上。

希望这会有所帮助，请问你是否需要我做任何事情。我将继续研究如何改变它为你的触摸屏x

Answer 4

$('.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
 }

}）;

Answer 5

我的解决方案是在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>

如何在第一次触摸时打开下拉列表，按照第二个上的链接 - Jquery？

5 个答案: