Question

我有一个菜单，其中有一个下拉悬停的子菜单，但我正在使其响应，我需要它的子菜单才能点击。 我通过定位屏幕大小来完成此。

我需要做的是停止使用stopLink类的锚标记执行点击操作，然后只删除子菜单而不是页面重定向

注意： *您可能会问为什么甚至需要第一个元素的超链接，它与我的客户无法协商

HTML

<ul class="mainMenu">
  <li>
     <a href="/index.html">Home</a>
  </li>
  <li>
     <a href="/products.html" class="stopLink">Products</a>
     <ul class="subMenu>
        <li><a href="/product1.html">P1</a></li>
        <li><a href="/product2.html">P2</a></li>
        <li><a href="/product3.html">P3</a></li>
     </ul>
</ul>

jquery - 可以阻止所有链接

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

jquery - 我认为需要发生的事情*

  $('.mainMenu > li').unbind().click(function (e) {
       $('.stopLink').each(function(e)
          e.preventDefault();
          location.href = "javascript:void(0);";
       });
       $(this).find('.subMenu').stop().slideToggle(400);
    });

更新

还尝试根据浏览器尺寸

专门定位它

var $w = window.innerWidth || document.documentElement.clientWidth;

if ($w < 1025) {
    $('.stopLink').each(function (e) {
        e.preventDefault();
        location.href = "javascript:void(0);";
    });
} else {
    $('.stopLink').each(function (e) {
        e.preventDefault();
        location.href = "/products.html";
    });
}

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

认为上面的代码肯定会起作用，但没有骰子:(

Answer 1

你试过这个吗？

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

Answer 2

如果你只是使用.click（）和e.preventDefault（）以及检查屏幕的宽度，你可以得到fiddle。

if(w < 1025) {
  $('a.stopLink').click(function (e) {
    e.preventDefault();
    $('ul.subMenu').slideToggle(400);
    return;
  });
}

更改特定超链接位置

2 个答案: