Question

我有一个响应式菜单，当在PC上查看时，悬停菜单下降，在平板电脑上显然你不能将鼠标悬停在点击我需要菜单下降。但是，该链接将用户指向点击页面。我需要阻止链接在点击（特定浏览器大小）上触发，以便打开下拉菜单

HTML

<ul class="mainMenu">
  <li>
     <a href="page.html">Page</a>
     <ul class="subMenu">
       <li><a href="">Sub Page 1</a></li>
       <li><a href="">Sub Page 2</a></li>
     </ul>
  </li>
  <li><a href="anotherpage.html">Another Page</a></li>
  <li><a href="anotherpage.html">Another Page</a></li>
  <li>
     <a href="page.html">Page</a>
     <ul class="subMenu">
       <li><a href="">Sub Page 1</a></li>
       <li><a href="">Sub Page 2</a></li>
     </ul>
  </li>
</ul>

这个jQuery实现了必要的悬停和下拉

的jQuery

    if ($bWidth > 1025) {
        $('.mainMenu > li').unbind().hover(function () {
            $(this).find('.subMenu').stop().slideToggle(400);
        });
    } else {
        $('.mainMenu > li').unbind().click(function () {
            $(this).find('.subMenu').stop().slideToggle(400);
        });
    }

最近的尝试

if ($bWidth > 1025) {
        $('.mainMenu > li').unbind().hover(function () {
            $(this).find('.subMenu').stop().slideToggle(400);
        });
    } else {
        $('.mainMenu > li').unbind().click(function (e) {
            e.preventDefault();
            location.href = "javascript:void(0);";
            $(this).find('.subMenu').stop().slideToggle(400);
            return;
        });
    }

这次尝试是最接近的ive，但它会阻止所有导航链接执行，我一直在尝试定位subMenu的父A，它将打开并关闭所有子菜单，而不仅仅是用户点击的1。有什么想法吗？

Answer 1

你需要在点击时使用event.preventDefault（）。还有一个很好的教程。对锚标记的preventDefault将阻止href触发。另外，你使用的是什么版本的jquery？我建议使用.on和.off而不是bind和unbind。此外，将事件设置为更好的选择器。 $（“parentSelector”）。on（“event”，“actual selector”，function（）{

}）;

see this demo

在浏览器大小+ jQuery上更改Href

1 个答案: