4

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

有没有办法让（仅在触摸设备上）父元素的第一次点击打开下拉菜单，第二次点击将您带到链接？

我对 HTML 和 CSS 有很好的了解，但对 javascript 却一无所知，所以如果解决方案是基于脚本的，请尽可能描述。

谢谢

4

5 回答 5

3

看看 DoubleTapToGo：

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

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

于 2014-05-17T01:00:58.113 回答
0 
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

于 2012-10-26T10:53:53.380 回答
0

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

<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
});
于 2012-10-26T10:28:38.000 回答
0 
$('.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
 }

});

于 2017-10-30T09:29:08.367 回答
0

我的解决方案是在 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>
于 2020-07-18T15:30:22.790 回答